一. this.props.children用法
this.props.children
表示组件的所有子节点。
1.1 App.js 组件
import React from 'react';
import Page from './components/Page'
function App() {
return (
<Page>
<div>hh</div>
<div>cc</div>
</Page>
);
}
export default App;
1.2 Page.jsx 组件
import React, {Component,Fragment} from 'react';
class Page extends Component {
render() {
return (
<Fragment>
<div>{this.props.children}</div>
{/* {React.Children.map(this.props.children, (item) => {
return <div>{item}</div>
})} */}
</Fragment>
);
}
}
export default Page;
二. 为什么用React.Children.map(props.children, () => ),而不是props.children.map(() => )?
因为不能保证props.children肯定是一个数组。
具我们所知,props是我们从上个组件传值传下来的集合,react是单向数据流,每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外,那就是this.props.children
,如下所示:
import React, { Component } from 'react'
class Test extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
{ this.props.children }
</div>
)
}
}
export default _ => {
return (
<div>
{/* 那么这个时候this.props.children指的就是一个对象,这个对象里面的内容是字符串a */}
<Test>a</Test>
{/* 那么这个时候this.props.children指的就是undefined */}
<Test />
{/* 那么这个时候this.props.children指的就是一个数组,并且这个数组里面包含的就是Test所包含的子节点*/}
<Test>
<div>1</div>
<div>2</div>
</Test>
</div>
)
}
this.props.children的处理:
既然我们知道了this.props.children是什么,那我们就要知道改怎么去处理他。据上面提到this.props.children
既可以是对象
,数组
,undefined
,那么按照平时处理数据的方式进行处理他的话,会显得很麻烦,那么我们就可以通过react官方提供的React.Children
去进行处理,并且如果你想遍历它的话,可以通过React.Children.map
去遍历它。