React中 Context和children属性

Context和children属性

1.Context

1.如果出现层级比较多的情况下,会使用Context来进行传递;

2.作用:跨组件传递数据;

//1.调用React.createContext() 创建Provider(提供数据)和Consumer(消费数据)两个组件
const {Provider,Consumer} = React.createContext()
//2.使用 Provider 组件作为父节点
class App extends React.Component {
    render() {
        return (
            // value里边的值是传递给子代的值
            <Provider value="传递给子代的数据">
                <div className="app">
                <Node />
                </div>
            </Provider>
        )
    }
}
const Node = props => {
    return (
        <div className="node">
            <SubNode />
        </div>
    )
}

const SubNode = props => {
    return (
      <div className="subnode">
        <Child />
      </div>
    )
  }
// 这个子节点想得到参数
const Child = props => {
    return (
        <div className="child">
            <Consumer>
                { data => <span> 我是子节点---{data}</span>}
            </Consumer>
        </div>
    )
}

2.children属性

children属性:表示组件标签的子节点,当组件标签有子节点时,props就会有该属性;

children属性与普通的props一样,值可以使任意值(文本,react元素,组件,甚至是函数);

function Hello(props) {
    return (
    	<div>
        	组件的子节点:{props.children}
        </div>
    )
}

<Hello>我是子节点</Hello>