如何将子组件转移到组件？

Question

我想在我的Text组件中渲染另一个组件，使用： {this.props.child}

我应该选择什么，为什么？

 <Route path={'/test'} render={() => <Test children={Test1} />} />

或者

 <Route path={'/test'} render={() => <Test><Test1 /></Test>} />

Answer 1

children道具应该总是像这样传递：

<Test><Test1 /></Test>

不过，有时您可能希望其他 JSX 作为道具传递，例如在某处设置较小的内容时，例如title 。 然后，您甚至可以同时使用 forms：

<Test title={<h1>Big title</h1>}>
  <ChildrenComponent />
</Test>

但是，为了保持一致性， children属性应该始终是组件的实际子项。

Answer 2

您必须使用第二种方式：

<Route path={'/test'} render={() => <Test><Test1 /></Test>} />

render prop 提供了内联渲染和将额外的 props 传递给元素的能力。 这个 prop 需要一个 function 当当前位置与路由的路径匹配时返回一个 React 元素。