import React, { Component, Children } from 'react'
export default class Childrens extends Component {
? ? render() {
? ? ? ? const { children } = this.props//父向子傳遞的值
? ? ? ? // console.log(children);
? ? ? ? console.log(Children);
? ? ? ? // console.log(this.props);
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? Children
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? Children.map(children,(item,index)=>{
? ? ? ? ? ? ? ? ? ? ? ? return <h3 key={index}
? ? ? ? ? ? ? ? ? ? ? ? >{item}.00
? ? ? ? ? ? ? ? ? ? ? ? {/* console.log(item); */}
? ? ? ? ? ? ? ? ? ? ? ? </h3>
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? {/* <h3>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? this.props.children
? ? ? ? ? ? ? ? ? ? }.00
? ? ? ? ? ? ? ? </h3> */}
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
import React, { Component ,createContext} from 'react'
import Father from './Father'
import { Provider } from '../utils/context'
// const {Provider}=createContext()
// console.log(createContext());
//Consumer 消費
//Provider 提供
//嵌套傳值 ?需要 嵌套關系
class Com extends Component {
? ? state={
? ? ? ? count:888
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h2>外層----{this.state.count}</h2>
? ? ? ? ? ? ? ? <Provider value={this.state.count}>
? ? ? ? ? ? ? ? ? ? <Father/>
? ? ? ? ? ? ? ? </Provider>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
export default Com
import React, { Component ,createContext } from 'react'
import Son from './Son'
export default class Father extends Component {
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>我是父組件</h3>
? ? ? ? ? ? ? ? <Son/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
import React, { Component ,createContext} from 'react'
import { Consumer } from '../utils/context'
// const {Consumer}=createContext()
export default class Son extends Component {
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>子組件----
? ? ? ? ? ? ? ? <Consumer>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? (num)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? return num
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? </Consumer>
? ? ? ? ? ? ? ?</h3>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
