首页 > 代码库 > React.Children

React.Children

2024-10-22 13:36:02   208人阅读

一直分不清React.Children与this.props.children是什么关系。其实很简单，this.props.children是子组件的集合，相当于把子组件当做组件的属性传入。

this.props.children有三种情况：

1.没有子组件时，数据类型为undefined

2.只有一个子组件时，数据类型为object

3.有多个子组件时，数据类型为数组

 

React.Children是React提供用来处理this.props.children的API，不用考虑this.props.children的数据类型，React.Children有map、forEach、count等方法

渲染组件：

ReactDOM.render(
    <APP>
        <div data=http://www.mamicode.com/{1}>
"color: #000000">) );

组件内：

export default class APP extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <ul>
            {React.Children.map(this.props.children,(child) =>{
                return (
                    <li>序号:{child.props.data}</li>
                )
            })}
            </ul>
            )
    }
}

 

React.Children


联系
我们