React 组件通信

最新推荐文章于 2024-07-27 00:10:42 发布

Lewis_1993

最新推荐文章于 2024-07-27 00:10:42 发布

阅读量283

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Levis_1993/article/details/78573639

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

父组件到子组件

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      msg: 'msg from parent'
    }
  }

  handleClick(){
    this.setState({
      msg: this.state.msg.split('').reverse().join('')
    })
  }

  render() {
    return (
      <div>
        <h3 onClick={this.handleClick.bind(this)}>我是父组件 => {this.state.msg}</h3>
        <Son msg={this.state.msg} />
      </div>
    )
  }
}

class Son extends Component {
  render() {
    return (
      <h5>我是子组件 => {this.props.msg}</h5>
    )
  }
}

子组件到父组件

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: '__'
    }
  }

  getData(data) {
    this.setState({
      number: data
    })
  }

  render() {
    return (
      <div>
        <h3>小明今天吃了几个鸡腿 ？</h3>
        <p>答：{`吃了${this.state.number}个`}<Son sendData={this.getData.bind(this)}/></p>
      </div>
    )
  }
}

class Son extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 10,
      text: '（点我告诉你答案）'
    }
  }

  handleClick(){
    this.props.sendData(this.state.number)
    this.setState({
      text: ''
    })
  }

  render() {
    return (
      <i style={{color: 'blue', cursor: 'pointer'}} onClick={this.handleClick.bind(this)}>
        {this.state.text}
      </i>
    )
  }
}