# 组合组件
# 包含关系
有些组件无法提前知晓它们子组件的具体内容. React 让我们使用props.children
来解决这个问题:
function A(props) { return <div>{props.children}</div>; } function App() { return ( <A> <p>hi</p> <p>你好</p> </A> ); }
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
对于A
标签里的内容, 都会被当做props
传递到A
组件里, 我们可以使用props.children
来将其渲染出来.
有时, 我们需要渲染多个目前未知的组件时, 就需要将其命名:
function A(props){ return ( <div> {props.left} </div> <div> {props.right} </div> ) } function App(){ return ( <A> left = {<p>this is left</p>} right = {<p>this is right</p>} </A> ) }
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在App
组件的A
标签里, left
和right
都分别作为A
组件的props
在A
组件内部可以使用.