反应 - 将道具传递给道具上的组件

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

您需要传入Container，Item组件类型和要分配的道具而不是实例。这是这样，你可以创建实例

前添加更多的道具然后，你可以做像这样：

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