代码之家 › 专栏 › 技术社区 › sme

如何向作为道具传入的React元素添加其他道具?

jsx reactjs javascript

sme · 技术社区 · 6 年前

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

例如:

父类

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 是反应元素( <MdInbox /> ,则, <MdTrash /> 等),并允许 size .我想设置 大小 中的属性 MenuItem 类,而不是像这样从父级传入道具: <MenuItem icon={<MdInbox size={24} />} .我宁愿只在一个地方设置尺寸,在 菜单项 班

3 回复 | 直到 6 年前

Denis 6 年前

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

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

Vadim Shvetsov 4 年前

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

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

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