Question

因此，<Route>的{{1}}组件具有react-router属性（docs）：

components

然后在适当的组件中，我可以通过组件的道具调用这些组件：

<Route path="latest" components={{sidebar: Sidebar, content: ContentLayout}} />

但是没有render() { <div> {this.props.sidebar} {this.props.content} <div> }我会这样做，我传递我的组件自定义道具：

react-router

我的问题是。当我使用React Router render() { <div> <Sidebar names={ ['foo', 'bar'] } isOpen={true} num={10} /> <ContentLayout type={ contentType } background={'#fff'} title={titleOne} /> <div> }组件的components属性时，如何将props传递给我的组件？

最好的方法是这样的：

<Route>

Answer 1

对此的一个解决方案是clone组件并在克隆过程中为它们指定新的道具。类似的东西：

render() {
  return (<div>
    {React.cloneElement(this.props.sidebar, props={names: ['foo', 'bar'], isOpen: true})}
    {React.cloneElement(this.props.content, props={type:contentType, background: '#fff'})}
  </div>);
}

使用<route components =“{}”>属性时如何将props传递给组件？

1 个答案: