<script type="text/babel">
//场景: A组件、B组件、C组件
//B组件在A组件中调用, C组件在B组件中调用, C组件需要使用A组件的数据
//方式一: 通过props逐级传递
class A extends React.Component {
constructor() {
super();
this.state = {
name: 'mark'
}
}
render() {
return (
<div name="A">
<h2>A组件</h2>
<B myname={this.state.name} />
</div>
);
}
}
class B extends React.Component {
componentDidMount() {
console.log(this.props.myname);
}
render() {
return (
<div name="B">
<h2>B组件</h2>
<C cname={this.props.myname} />
</div>
);
}
}
class C extends React.Component {
render() {
return (
<div name="C">
<h2>C组件</h2>
<h3>{this.props.cname}</h3>
</div>
);
}
}
//方式二: 通过context传递数据, 通过this.context获取Provider的value属性值
//D2组件在D1组件中调用, D3组件在D2组件中调用, D3组件需要使用D1组件的数据
//创建context
let MyContext = React.createContext({
name: '二哈',
phone: '13200000009'
});
class D1 extends React.Component {
constructor() {
super();
this.state = {
userInfo: {
username: 'kevin',
phone: '1520000000'
}
}
}
updateUserInfo() {
this.setState({
userInfo: {
name: '爱丽丝',
phone: '18900000001'
}
})
}
render() {
return (
//MyContext.Provider的value就是需要传递的数据
<MyContext.Provider value={this.state.userInfo}>
<div className="d1">
<h2>D1组件</h2>
<button onClick={this.updateUserInfo.bind(this)}>更新userInfo</button>
<D2 />
</div>
</MyContext.Provider>
);
}
}
class D2 extends React.Component {
render() {
return (
<div className="d2">
<h2>D2组件</h2>
<D3 />
</div>
);
}
}
class D3 extends React.Component {
static contextType = MyContext;
//通过this.context获取MyContext.Provider提供的数据, 也就是value属性值
componentDidMount() {
console.log('this.context ==> ', this.context);
}
render() {
return (
<div className="d3">
<h2>D3组件</h2>
<h3>手机号：{this.context.phone}</h3>
</div>
);
}
}
//方式三: 通过context传递数据, 通过Consumer获取Provider的value属性值
//F2组件在F1组件中调用, F3组件在F2组件中调用, F3组件需要使用F1组件的数据
let {Component, createContext} = React;
// let FContext = createContext('默认值');
let {Provider, Consumer} = createContext('默认值');
class F1 extends Component {
constructor() {
super();
this.state = {
book: ['HTML', 'CSS', 'WECHAT']
};
}
//移除book
removeBook(index) {
console.log('index ==> ', index);
this.state.book.splice(index, 1);
this.setState({
book: this.state.book
})
}
render() {
return (
<Provider value={{book: this.state.book, remove: this.removeBook.bind(this)}}>
<div name="f1">
<h2>F1组件</h2>
<F2 />
</div>
</Provider>
);
}
}
class F2 extends Component {
render() {
return (
<div name="f2">
<h2>F2组件</h2>
<F3 />
</div>
);
}
}
class F3 extends Component {
//删除book
deleteBook(index, fn) {
fn(index);
}
createBookList(data, fn) {
return data.map((v, i) => {
return (
<div key={i}>
<h3>{v}</h3>
<button onClick={this.deleteBook.bind(this, i, fn)}>删除</button>
</div>
);
})
}
render() {
return (
<Consumer>
{
// v: FContext.Provider的value属性值
v => (
<div name="f3">
<h2>F3组件</h2>
<div>
{this.createBookList(v.book, v.remove)}
</div>
</div>
)
}
</Consumer>
);
}
}
ReactDOM.render(
<div>
<A />
<D1 />
<F1 />
</div>,
document.getElementById('root')
);
</script>
