React-进阶

最新推荐文章于 2023-11-07 10:37:49 发布

理头崴特

最新推荐文章于 2023-11-07 10:37:49 发布

阅读量262

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/m0_60698858/article/details/120199420

版权

2、使用children代替render属性（推荐）

一、组件通讯

（一）父传子

通过props传递

class Parent extends React.Component {
  state = {
    number: '123456'
  }
  render() {
    return (
        <div>
          <Child number = {this.state.number}/>
        </div>
    )
  }
}

function Child(props) {
  return <div>接收number：{props.number}</div>
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

（二）子传父

利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

class Parent extends React.Component {
  getChildMsg = msg => {
    console.log(msg)
  }
  render() {
    return (
        <div>
          <Child getMsg = {this.getChildMsg}/>
        </div>
    )
  }
}

class Child extends React.Component {
  state = {
    childMsg: 'Hello React'
  }
  handleClick = () => {
    this.props.getMsg(this.state.childMsg)
  }
  render() {
    return (
        <button onClick={this.handleClick}>点击后父组件打印子组件传递数据</button>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

（三）兄弟组件间通讯

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
公共父组件职责：1、提供共享状态 2、提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或操作状态的方法

class Parent extends React.Component {
  state = {
    number: 0
  }
  addClick = () => {
    this.setState({
      number: this.state.number+1
    })
  }
  render() {
    return (
        <div>
          <Child1 number={this.state.number}/>
          <Child2 addClick={this.addClick}/>
        </div>
    )
  }
}

const Child1 = props => {
  return (
      <div>
        number：{props.number}
      </div>
  )
}
const Child2 = props => {
  return (
      <button onClick={() => props.addClick()}>+1</button>
  )
}
ReactDOM.render(<Parent/>, document.getElementById('root'))

（四）跨组件传递数据（Context）

作用：跨组件传递数据，比如主题、语言等；如果两个组件是远方亲戚（比如嵌套多层），则可以使用Context实现组件通讯

步骤：

调用React.createContext()创建Provider（提供数据）和Consumer（消费数据）两个组件
使用Provider组件作为父节点
设置value属性，表示要传递的数据
使用Consumer组件接收数据

例子：当APP是Child的父组件的父组件的父组件时，用props传值太过麻烦，因此用Context代替

// 1、创建context得到两个组件
const { Provider, Consumer} = React.createContext()

class App extends React.Component {
  render() {
    return (
        // 2、使用Provider组件作为父节点+3、设置value属性，表示要传递的数据
        <Provider value="pink">
          <div>
            <Node/>
          </div>
        </Provider>
    )
  }
}

const Node = props => {
  return (
      <div>
        <SubNode/>
      </div>
  )
}
const SubNode= props => {
  return (
      <div>
        <Child/>
      </div>
  )
}

const Child = props => {
  return(
      // 4、使用Consumer组件接收数据
      <div>
        <Consumer>
          {
            data => <span>我是子节点: {data}</span>
          }
        </Consumer>
      </div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'))