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>