小道具で受け取ったコンポーネントに小道具を返す

Question

私は反応していますが、私は問題に直面しています。

私は、支柱として別のコンポーネントを受け入れ、同じコンポーネントに他の支柱を渡す必要があるコンポーネントを持っています。 例：

export default class Item extends React.Component { 
    render() { 
     return (<div onClick={this.props.onClick}>Some content.</div>) 
    } 
} 

Item.propTypes = { 
    onClick: PropTypes.func.isRequired 
} 

export default class Container extends React.Component { 
    onClick() { 
     // Do something. 
    } 
    render() { 
     // render here the item and passing it my onClick method. 
    } 
} 

Container.propTypes = { 
    item: PropTypes.element.isRequired 
} 

編集： だから私はおそらくES5の構文を使用して、このような何か行うことができます。

React.createElement(item, { 
    onClick: this.onClick 
}); 

しかし、どのように私はES6でそれを達成することができますか？

Answer 1

これはすべての小道具を渡す必要がある場合はこれを行う必要があります、あなたはあまりにも普及した演算子を使用することができます。

export default class Item extends React.Component { 
    render() { 
    return (
     <div onClick={this.props.handleClick}>Some content.> 
     </div> 
    ) 
    } 
} 

Item.propTypes = { 
    onClick: PropTypes.func.isRequired 
} 

export default class Container extends React.Component { 

    render() { 
    const handleClick =() => { 
     // Do something. 
    } 
    // render here the item and passing it my onClick method. 
    render() { 
     return (
     <Item handleClick={handleClick} /> 
    ); 
    } 
    } 
} 

Container.propTypes = { 
    item: PropTypes.element.isRequired 
} 

Answer 2

インスタンスではなく、コンテナ、アイテムコンポーネントタイプ、および割り当てたいプロップに渡す必要があります。

class Container extends React.Component { 
    static propTypes = { 
     ItemType: PropTypes.func.isRequired, 
     itemProps: PropTypes.object.isRequired, 
    }; 

    onItemClick =() => { 
     // do something 
    }; 

    render() { 
     const { ItemType, itemProps } = this.props; 
     return <ItemType {...itemProps} onClick={this.onItemClick} />; 
    } 
} 

class MyDisplay extends React.Component { 
    render() { 
     const ItemToRender = someCondition ? Item : AnotherItem; 
     return <Container ItemType={ItemToRender} itemProps={{a: 1, b: 2}} />; 
    } 
}