Question

我有一个像这样的容器：

const ReactContainer = ({ children, ...rest }) => React.cloneElement(children, rest);

现在，我想向克隆元素添加新道具 - count和flag：

所以我尝试了这个：

const ReactContainer = ({ children, ...rest }) => {
    const count = 0;
    const flag = false;

    return React.cloneElement(children, {count, flag}, rest);
};

但这不起作用，我尝试了其他变化。如何将这些新道具添加到克隆元素中以保持扩展操作符的简单性？

Answer 1

请试试这个：

const ReactContainer = ({ children, ...rest }) => {
    const count = 0;
    const flag = false;

    return React.cloneElement(children, {...rest, count, flag});
};

请注意，在上面的示例中，组件功能定义中使用的...rest充当rest parameters syntax，cloneElement中的column_2充当spread syntax。

React通过扩展运算符向克隆元素添加新道具

1 个答案: