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>
)
}
}
