React如何实现支持props与children的CopyToClipboard组件并修复报错

• 组件入参没有解构children属性，代码中直接引用children时会触发未定义变量的引用错误，这是你当前报错的直接诱因。
• 现有代码仅定义了复制逻辑，但没有将复制函数绑定到子元素的点击事件上，即便修复变量问题，点击子元素也无法触发复制操作。

import { cloneElement } from 'react';

const CopyToClipBoard = ({ text, onCopy, children }) => {
    // 限制仅支持传入单个子元素，避免逻辑异常
    if (Array.isArray(children)) {
        throw new Error('CopyToClipBoard 组件仅允许传入单个子元素');
    }

    const doCopy = async () => {
        try {
            await navigator.clipboard.writeText(text);
            // 可选链防止未传onCopy时出现报错
            onCopy?.();
        } catch (err) {
            console.error('Failed to copy: ', err);
        }
    };

    // 给传入的子元素绑定点击事件，同时兼容子元素本身的 onClick 逻辑
    const wrappedChild = cloneElement(children, {
        onClick: async (e) => {
            // 先执行子元素原有的点击事件（如果存在）
            children.props.onClick?.(e);
            await doCopy();
        }
    });

    return wrappedChild;
};

export default CopyToClipBoard;

内容的提问来源于stack exchange，提问作者angry kiwi