Question

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

例如：

家长班

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。我想在size类中设置MenuItem属性，而不是像以下那样从父节点传递prop <MenuItem icon={<MdInbox size={24} />}。我只想在MenuItem级内仅在一个地方设置大小。

Answer 1

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

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

儿童班：

{{1}}

Answer 2

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

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

Answer 3

你应该能够在渲染之前更新子道具....

class MenuItem Extends React.Component {
    render() {
        const icon = this.props.icon;
        icon.props.size = 24; //assuming size is static

        return(
            <div className="MenuItem">
                {icon}
            </div>
        );
    }
}

如何将其他道具添加到作为道具传入的React元素？

3 个答案: