美文网首页
子组件和父组件之间的通信

子组件和父组件之间的通信

作者: kzc爱吃梨 | 来源:发表于2020-04-14 18:30 被阅读0次

龟兔赛跑范例


简单父子组件通信

天气信息传递:
效果展示

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '数据还未到'
    }
  }
  changeMsg() {
    this.setState({
      message: '今天天气很好'
    })
  }
  render() {
    return (
      <div>
        <h1>hello 今天天气怎么样</h1>
        <Tianqi message={this.state.message} fn={this.changeMsg.bind(this)}></Tianqi>
      </div>
    )
  }
}

function Tianqi(props) {
  return ( 
    <div>
      <p>{props.message}</p>
      <button onClick={props.fn}>click</button>
    </div>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'))
图片.png

相关文章

  • React的组件通信

    组件之间进行通信的情况: 父组件向子组件通信 子组件向父组件通信 兄弟组件之间通信 发布者-订阅者模式 一、父组件...

  • 组件间通信

    组件间通信 父组件向子组件通信,子组件之间通信 父组件以自身的state作为作为子组件的props;父组件调用se...

  • React-组件之间的通信

    在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面: 子组件向父组件...

  • react之组件通信

    需要组件之进行通信的几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  • vue组件之间的数据传递(通信)

    种类 父组件跟子组件通信 子组件跟父组件通信 兄弟组件之间的通信 父组件如何将数据传到子组件中 可以通过prop将...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • React组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • React中组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • React中组件通信

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • Vue 组件 / 通信

    子组件=》父组件 vue的组件之间的通信类似angular的父子层级之间通信,父组件获取子组件数据步骤大概如下: ...

网友评论

      本文标题:子组件和父组件之间的通信

      本文链接:https://www.haomeiwen.com/subject/xqlvmhtx.html