Блог

Я хочу создать компонент крючка с помощью такого API, как этот

 <CopyToClipboard
    text={thetext}
    onCopy={oncpied}>
    <button className="button">Copy</button>
</CopyToClipboard>
 

Это мой дубль

 const CopyToClipBoard = ({ text, onCopy }) => {
    const docopy = async () => {
        try {
            await navigator.clipboard.writeText(text)
            onCopy()
        } catch (err) {
            console.error('Failed to copy: ', err)
        }
    }
    return (
        <>
            {children}
        </>
    )
}
export default CopyToClipBoard

 

Но у меня какая-то ошибка с детьми

Вы забыли получить children от объекта реквизит

 const CopyToClipBoard = ({ text, onCopy, children }) => {
    const docopy = async () => {
        try {
            await navigator.clipboard.writeText(text)
            onCopy()
        } catch (err) {
            console.error('Failed to copy: ', err)
        }
    }
    return (
        <>
            {children}
        </>
    )
}
export default CopyToClipBoard
 

Вы не уничтожили дочерние элементы из реквизита перед его использованием, и, следовательно, произошла ошибка

 const CopyToClipBoard = ({ text, onCopy, children }) => {
    const docopy = async () => {
        try {
            await navigator.clipboard.writeText(text)
            onCopy()
        } catch (err) {
            console.error('Failed to copy: ', err)
        }
    }
    return (
        <>
            {children}
        </>
    )
}
export default CopyToClipBoard