소품으로 전달된 React 요소에 소품을 추가하는 방법은 무엇입니까?

소품으로 전달된 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.iconReact 요소(<MdInbox />,<MdTrash />, 등)를 통해 속성을 설정할 수 있습니다.size. 를 설정하고 싶다.size의 재산MenuItem이렇게 부모로부터 소품을 건네주는 것이 아니라, class:<MenuItem icon={<MdInbox size={24} />}사이즈를 한 곳에서만 설정하고 싶다.MenuItem학급.

인스턴스 대신 구성 요소 생성자를 전달합니다.

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

아이콘 크기를 설정할 수 있습니다.React.cloneElementAPI

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

컴포넌트와 소품을 하위 엘리먼트에 전달하고 컴포넌트와 소품을 완전히 디스트럭처한 후 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>
            );
        }
    }
}

언급URL : https://stackoverflow.com/questions/49832457/how-to-add-additional-props-to-a-react-element-passed-in-as-a-prop