react中從createContext到useContext的用法

import React,{ Component,createContext,useContext } from "react";

//變體一
// let {Provider,Consumer} = createContext();
// class Child extends Component {
//     render(){
//         return (
//             <Consumer>
//                 {(val)=>{
//                     console.log(val);
//                     return <div>這是從祖先傳下來的：{val}</div>;
//                 }}
//             </Consumer>
//         )
//     }
// }
// class Parent extends Component {
//     render(){
//         return (
//             <div>
//                 <Child/>
//             </div>
//         )
//     }
// }
// class Context extends Component {
//     render(){
//         return (
//           <Provider value={'家傳之寶'}>
//             <Parent />
//           </Provider>
//         );
//     }
// }



//變體二
// let myContext = createContext();//重點1
// class Child extends Component {
//   static contextType = myContext; //重點3
//   render() {
//     console.log(this.context);
//     return <div>這是從祖先傳下來的：{this.context}</div>;
//   }
// }
// class Parent extends Component {
//     render(){
//         return (
//             <div>
//                 <Child/>
//             </div>
//         )
//     }
// }
// class Context extends Component {
//     render(){
//         return (//重點2
//           <myContext.Provider value={"家傳之寶"}>
//             <Parent />
//           </myContext.Provider>
//         );
//     }
// }



//變體三
// let myContext = createContext();//重點1
// function Child() {
//     return (
//       //重點3
//       <myContext.Consumer>
//         {val => {
//           return <div>這是從祖先傳下來的：{val}</div>;
//         }}
//       </myContext.Consumer>
//     );
// }

// class Parent extends Component {
//     render(){
//         return (
//             <div>
//                 <Child/>
//             </div>
//         )
//     }
// }
// class Context extends Component {
//     render(){
//         return (//重點2
//           <myContext.Provider value={"家傳之寶"}>
//             <Parent />
//           </myContext.Provider>
//         );
//     }
// }



//變體四
let myContext = createContext();//重點1
function Child() {
  let val = useContext(myContext); //重點3
  console.log(val);
  return <div>這是從祖先傳下來的：{val}</div>;
}
class Parent extends Component {
    render(){
        return (
            <div>
                <Child/>
            </div>
        )
    }
}
class Context extends Component {
    render(){
        return (//重點2
          <myContext.Provider value={"家傳之寶"}>
            <Parent />
          </myContext.Provider>
        );
    }
}


export default Context;
複製代碼