React如何实现父子组件通信

最新推荐文章于 2024-08-08 11:15:06 发布

努力了吗梁同学

最新推荐文章于 2024-08-08 11:15:06 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/Layouwen/article/details/108281521

版权

本文介绍了在React中如何实现在父组件显示数值，并通过子组件的按钮点击修改父组件的值。主要步骤包括：在父组件定义修改值的函数，然后通过props将该函数传递给子组件，子组件接收到函数后即可调用，从而达到父子组件间的通信效果。

摘要由CSDN通过智能技术生成

一、场景

在父组件显示数值，在子组件有个按钮点击后修改父组件的值。

二、代码

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0-rc.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/0.0.0-0c756fb-f7f79fd/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

CSS

.father {
    background: #000;
}
.son {
    background: #333;
}

JSX

function App(){
  return (
    <div>
      <Father/>
    </div>
  )
}

class Father extends React.Component{
  constructor(){
    super()
    this.state = {
      number: 0
    }
  }
  changeValue(){
    this.setState({
      number: this.state.number + 1
    })
  }
  render(){
    return (
      <div className="father">
        <div>{this.state.number}</div>
        <Son change={this.changeValue.bind(this)}/>
      </div>
    )
  }
}

class Son extends React.Component {
  constructor(){
    super()
  }
  render(){
    return (
      <div className="son">
        <button onClick={this.props.change}>更改值</button>
      </div>
    )
  }
}

render()

function render(){
  ReactDOM.render(<App/>, document.querySelector('#root'))
}

三、结论

在父组件声明一个函数，用于修改父组件中的值。
将此函数通过子组件的props进行传参

<Son change={this.changeValue.bind(this)}>

子组件接收后，即可调用外部函数

<button onClick={this.props.change}>更改值</button>

四、代码效果预览

预览链接

努力了吗梁同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫