1. 前言
- react 好久没写啥文章了
- 最近 有人问个问题 简单写了个 demo
- 这里再做个梳理
2. 是什么 what
- 传参/通信
- 父子组件传参
- react-redux
- 兄弟组件 也还没写 正好补全吧
3. 思路
- 将共享状态 提升到最近的公共组件 父组件中,由父组件管理这个状态
- 公共父组件 功能
- 提供共享状态
- 提供操作共享状态的方法
4. 布局
- 想写计算器 有点麻烦 做个 demo 吧
- 显示器 是个子组件 Child1
- 下面是 是个子组件 Child2
5. 子组件
- 子组件 1
const Child1 = (props)=>{ return <h1> 显示器:{props.count}</h1> }
- 子组件 2
const Child2 = (props)=>{ console.log(props) return <button onClick={ ()=> props.increase(10)}>+1</button> }
6. 父组件
- 核心代码
let { Component } = React; // 子组件 class Counter extends Component { // 提供共享状态 state = { count:0 } // 提供修改方法 increase = (n = 1)=>{ this.setState({ count:this.state.count + n }) } render(){ return( <div> <h1>计算器</h1> <Child1 count={this.state.count}/> <Child2 increase={this.increase} /> </div> ) } }
7. 后记
- 就是 相当于 一个简单的 事件总线/event Bus
