web-dev-qa-db-fra.com

Comment ajouter des accessoires supplémentaires à un élément React passé comme accessoire?

Je passe un élément react comme accessoire à un autre élément. Dans l'élément enfant qui reçoit l'accessoire, je dois définir des accessoires supplémentaires pour cet élément.

Par exemple:

classe parent

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

classe enfant

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 est un élément React (<MdInbox />, <MdTrash />, etc.), et permet une propriété size. Je veux définir la propriété size dans la classe MenuItem, au lieu de passer l'hélice du parent comme ceci: <MenuItem icon={<MdInbox size={24} />}. Je préfère simplement définir la taille en un seul endroit, dans la classe MenuItem.

javascriptreactjsjsx
8
sme

Passez le constructeur du composant au lieu d'une instance:

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

La classe enfant:

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

Vous devriez pouvoir mettre à jour l'accessoire enfant avant le rendu ....

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>
        );
    }
}
1
Seth McClaine