如何向作为道具传入的 React 元素添加额外的道具？答案

【问题标题】：How to add additional props to a React element passed in as a prop?如何向作为道具传入的 React 元素添加额外的道具？
【发布时间】：2018-09-24 17:25:39
【问题描述】：

我将一个反应元素作为道具传递给另一个元素。在接收道具的子元素中，我需要为该元素设置额外的道具。

例如：

父类

class Menu Extends React.Component {
    render() {
        return(
            <div className="Menu">
                <MenuItem icon={<MdInbox />} />
                <MenuItem icon={<MdDrafts />} />
                <MenuItem icon={<MdTrash />} />
            </div>
        );
    }
}

儿童班

class MenuItem Extends React.Component {
    render() {
        return(
            <div className="MenuItem">
                {this.props.icon} // I want to set the icon's size prop here
            </div>
        );
    }
}

this.props.icon 是一个 React 元素（<MdInbox />、<MdTrash /> 等），它允许一个属性 size。我想在MenuItem 类中设置size 属性，而不是像这样从父级传递道具：<MenuItem icon={<MdInbox size={24} />}。我宁愿只在 MenuItem 类中的一个地方设置大小。

【问题讨论】：

React Element 是不可变的，因此你不能传递额外的 props 或在之后更改它 (reactjs.org/docs/glossary.html#elements)

标签： javascript reactjs jsx

【解决方案1】：

传入组件构造函数而不是实例：

class Menu extends React.Component {
    render() {
        return(
            <div className="Menu">
                <MenuItem icon={MdInbox} />
                <MenuItem icon={MdDrafts} />
                <MenuItem icon={MdTrash} />
            </div>
        );
    }
}

子类：

class MenuItem extends React.Component {
    render() {
        // This constant must begin with a capital,
        // it’s how React distinguishes HTML elements from components.
        const Icon = this.props.icon;
        return(
            <div className="MenuItem">
                <Icon size={24} />
            </div>
        );
    }
}

【讨论】：

哈，我实际上更喜欢这个分辨率 :-) 唯一需要担心的是，如果 op 想要添加特定于该类型的其他数据（虽然在示例中没有提到）
谢谢！至于添加其他props，可以使用React.cloneElement，即：React.cloneElement(Icon, { onClick: this.open, size: 24 }).
它实际上对我不起作用。我的应用程序由于某种原因崩溃。有这种用法的相关文档吗？
@Alex，这对你的应用来说太具体了，我想你需要一个新问题。
@Denis 我认为我们在 MenuItem 中传递图标道具时需要一个函数，否则反应会抛出错误，说预期的函数/类得到了对象。

【解决方案2】：

您可以使用React.cloneElement API 设置图标大小

class MenuItem Extends React.Component {
    render() {
        return(
            <div className="MenuItem">
                {React.cloneElement(this.props.icon, { size: 24 })}
            </div>
        );
    }
}

【讨论】：

【解决方案3】：

您也可以只将组件和道具传递给子元素，完全解构您的组件和道具，然后将其渲染为 JSX 元素。然后，您可以将道具传播到传递的组件中。这样您的子组件可重用，您可以从父组件更改其道具。

class Menu extends React.Component {
        render() {
            return(
                <div className="Menu">
                    <MenuItem Icon={MdInbox} size={24}/>
                    <MenuItem Icon={MdDrafts} size={24} />
                    <MenuItem Icon={MdTrash} size={24}/>
                </div>
            );
        }
    }

The child class:

    class MenuItem extends React.Component {
        render() {
            // This constant must begin with a capital,
            // Use JS ...rest operator to seperate Icon from remaining props
            const {Icon, ...remainingProps} = this.props;
            return(
                <div className="MenuItem">
                    <Icon {...remainingProps}/>
                </div>
            );
        }
    }
}

【讨论】：