1. 前言
框架类的都少不了 组件间的传值
父子组件 兄弟组件等
先来梳理个 父 改子
2. 需求
点击 父组件内的按钮 ,修改数据,子组件跟随变化
点击子组件内的按键 ,父组件数据也修改
极简插件 很多浏览器的调试插件安装比较麻烦,这个安装起来非常方便,需要的可以试试
3. 父传子 -----子组件
类组件用的比较多
构造函数不是必须的
class Child extends React.Component { render() { return (<div> <h2> 子-child---{this.props.num} </h2> </div> ) } }
4. 父组件-传值-子组件
state定义一个 变量- 父传子 和
vue类似 通过 属性传值- 父组件 点击事件 箭头函数 里面 修改
statethis的问题 以后就默认你懂了,不在详细讲解setState()修改 数据 和小程序 类似
class App extends React.Component { constructor(){ super(); this.state={ app_num:0 } } render(){ return( <div> <h1> App </h1> <button onClick={()=>{this.increase()}}>父-app-btn </button> <Child num={this.state.app_num}/> </div> ) } increase(){ this.setState({ app_num: this.state.app_num +1 }) } }
5. 子组件 修改父组件数据 --子组件
直接在上边 的子组件 基础上 进行修改就行
就加了一个点击事件
其实这个思路和
vue是一样的, 通过回调函数来修改
因为子组件不能修改 父组件的数据 ,那就只能通过 传值的时候,把父组件的修改函数 像普通传参一样传过来
js里面本身函数也是一种数据类型嘛可以想象 这个
add应该就是 父组件的修改函数
class Child extends React.Component { render() { return (<div> <h2> 子-- child---{this.props.num} </h2> <button onClick={this.props.add}> 子--- child-btn</button> </div> ) } }
6. 父组件
在上边的 父组件基础上进行修改就行
主要 问题还是
this指向 ,怎么才 能在 子组件里面 还让this指向父组件,因为这个 修改函数 只有在父组件的
this上才有传值的时候通过
bind直接绑定this
render(){ return( <div> <h1> App </h1> <button onClick={()=>{this.increase()}}>父--app-btn </button> {/* props传递 父组件的 修改函数 作为参数 传给子组件 只有保证this指向父组件,那么子组件修改的就是父组件的数据 vue是通过事件 传递 */} <Child num={this.state.app_num} add={this.increase.bind(this)}/> </div> ) }
