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

Question

I want to render in my Text component another component using: {this.props.child}

What should I choose and why?

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

or

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

Answer 1

The children prop should always be passed like:

<Test><Test1 /></Test>

You may want other JSX passed as a prop sometimes though, like when setting a smaller bit of content somewhere, like a title . You can then even use both forms:

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

But, for consistency, the children prop should always be the component's actual children.

Answer 2

You have to use the second way:

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

The render prop provides the ability for inline rendering and passing extra props to the element. This prop expects a function that returns a React element when the current location matches the route's path.