学习笔记
1.父组件 传值 子组件
通过属性绑定的方式传值，在子组件里面用props接收值
// 父组件 class App extends React.Component { state ={ msg:'我是app的值' } render() { return <div> 我是App <Dbs name={this.state.msg}></Dbs> </div> } } // 子组件 class Dbs extends React.Component { render() { return <p>我是Dbs{this.props.name}</p> } }
2.子组件 传值 父组件
通过属性绑定传值一个回调函数，在子组件通过props接收父组件传来的函数，在函数里面传值值，父组件通过回调函数接收值
子传父的 回调函数 应该写 this.adduser.bind(this) 这样在父组件接收子组件的回调函数 设置this.setstate的 时候 里面的this指向依旧还是 指向父级的实例
// 父组件 class App extends React.Component { // 回调函数 add = (data) => { console.log(data) } render() { return <div>app：<Dbs add={this.add}></Dbs></div> } } //子组件 class Dbs extends React.Component { render() { return <div>{this.props.add('传给父亲的值')}</div> } }
3.兄弟组件传值
通过2个兄弟最近的父节点，传值， 都把数据通过子传父 给父组件，然后父组件在给对应的兄弟组件
会报错不知道为什么 刚刚接触react 以后更正
// 把dbs的数据传给 cs组件 class App extends React.Component { state = { msg: '' } // 回调函数 user = (data) => { console.log(data) if (data === this.state.msg) { return false } this.setState({ msg: data }) } render() { return <div> <Dbs user={this.user}></Dbs> <Cs msg={this.state.msg}></Cs> </div> } } class Dbs extends React.Component { state = { msg: '我是dbs' } render() { return <div>我是dbs{this.props.user(this.state.msg)}</div> } } class Cs extends React.Component { render() { return <div>我是cs{this.props.msg}</div> } }4.content 多层传值
通过调用React.createContent() 创建Provide(提供数据)和 Consumer(消费数据)两个组件
import React, {createContext} from "react";
const {Provider, Consumer} = React.createContext()
// Provider 提供数据 属性绑定只能写 value
// Consumer使用数据 回调函数只能 写 data
class App extends React.Component {
state = {
msg: '我是app'
}
render() {
return <Provider value={this.state.msg}>
<Dbs></Dbs>
</Provider>
}
}
class Dbs extends React.Component {
render() {
return <Rd></Rd>
}
}
class Rd extends React.Component {
render() {
return <div>
33
<Consumer>{data => <span>我是子节点{data}</span>}</Consumer>
</div>
}
}
export default App;
