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

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

Answer 2

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

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