react中兄弟组件进行传值

最新推荐文章于 2025-03-28 09:35:47 发布

dong.wang

最新推荐文章于 2025-03-28 09:35:47 发布

阅读量493

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/wangdong9395/article/details/109075070

版权

react 专栏收录该内容

33 篇文章

订阅专栏

这篇博客详细介绍了在React应用中如何实现兄弟组件之间的数据传递，主要步骤包括：在父组件定义状态和更新状态的方法，通过props将状态和方法分别传入到发送和接收组件，然后在发送组件中通过事件触发父组件的状态更新方法，最后在接收组件中接收到传递的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
  class Father extends React.Component {
    add = () => {
      this.setState({
        num: this.state.num + 1
      })
    }
    state = {
      num: 0
    }
    render() {
      return (
        <div>
          <Child1 count = {this.state.num}/>  
          <Child2 onIncrement = {this.add}/>  
        </div>
      )
    }
  }
  class Child1 extends React.Component {
    render() {
      return (
        <p>计数器：{this.props.count}</p>
      )
    }
  }
  class Child2 extends React.Component {
    handleClick = () => {
      this.props.onIncrement()
    }
    render() {
      return (
        <button onClick={this.handleClick}>+1</button>
      )
    }
  }


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

  </script>
</body>

</html>