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

Question

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

例如：

家长班

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 is a React element ( <MdInbox /> , <MdTrash /> , etc), and it allows for a property size .我想在 MenuItem 类中设置 size 属性，而不是像这样从父级传递道具： <MenuItem icon={<MdInbox size={24} />} 。我宁愿只在一个地方设置大小，在 MenuItem 类中。

原文由 sme 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>
        );
    }
}

原文由 Denis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Vadim Shvetsov 发布，翻译遵循 CC BY-SA 4.0 许可协议