app元件要傳遞給child元件 該如何處理

更好的姿勢

跨元件傳遞資料

Provider 用來提供資料

Consumer用來消費資料

1呼叫React.createContext() 建立provider和comsumer消費兩個元件

const {Provider,Consumer}=React.createContext()

2使用Provider

<Provider>

<div>

<child1/>

</div>

</Provider>

    //匯入react
    import React from 'react'
    import ReactDOM from 'react-dom'
     
    //匯入元件
    // 約定1：類元件必須以大寫字母開頭
    // 約定2:類元件應該繼承react.component父類 從中可以使用父類的方法和屬性
    // 約定3:元件必須提供render方法
    // 約定4:render方法必須有返回值
    const {Provider,Consumer}=React.createContext()
    class App extends React.Component {
        state = {
            count: 0,
        }
     
        render() {
            return (
                <Provider value="geyao">
                <div>                
                    <Child1 count={this.state.count}/>            
                </div>
                </Provider>
            )
        }
    }
    const Child1=props=>{
        return <div className='app'>
            <Node/>
        </div>
    }
    const Node=props=>{
        return <div className='app'>
            <SubNode/>
        </div>
    }
    const SubNode=props=>{
        return <div className='app'>
            <Consumer>
                {data=><span>{data}</span>}
            </Consumer>
        </div>
    }
     
     
     
    ReactDOM.render(<App />, document.getElementById('root'))

執行結果