React中组件的props.children

props.children是用于将从父组件传递过来的标签放置到子组件中

1.创建父组件

首先引入react和reactdom

import React from 'react'
import ReactDOM from 'react-dom'

创建父组件

class ParentDom extends React.Component{
    constructor(){
        super()
        this.state={
        }
    }
    render(){
        return (
            <div>
                <ChildDom>
                    <h1>这是在父组件添加的标签</h1>
                </ChildDom>
            </div>
        )
    }
}

2.创建子组件

class ChildDom extends React.Component{
    constructor(){
        super()
        this.state={
        }
    }
    render(){
        return (
            <div>
                {this.props.children}
                {/* 需要在这里添加一个占位符，就能将从父组件中的标签加入子组件 
                如果这是一个数组，会自动循环输出*/}
            </div>
        )
    }
}

3.渲染到页面

ReactDOM.render(
    <ParentDom><p>这是在render加的数据</p></ParentDom>
    ,document.getElementById('app')
)

总结：

在自定义的组件标签中加入的标签会转换成一个虚拟DOM对象，然后传入到props的children属性中，在这个属性中可以访问标签上的一切属性
可以给标签定义一个属性，加入特定的属性名，然后对特定的标签的位置进行设置