React组件之间的通讯分为三种:
- 父组件 →子组件
- 子组件 →父组件
- 兄弟组件
父组件传递数据给子组件
步骤:文章来源:https://www.toymoban.com/news/detail-527432.html
- 父组件提供要传递的state数据
- 给子组件标签添加属性,值为state中的数据
- 子组件中通过props接收父组件中传递的数据
项目演示:
使用脚手架生成一个React项目: npx create-react-app ex-app
运行项目:npm start
目录结构如下:
index.js中的代码:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 父传子
// 父组件
class Parent extends React.Component {
state = {
lastName: '王'
}
render() {
return ( <
div className = "parent" >
父组件:
<
Child name = {
this.state.lastName
}
/> <
/div>
)
}
}
const Child = (props) => {
console.log(props);
return ( <
div className = "child" >
<
p > 子组件, 接收到父组件的数据: {
props.name
} < /p> <
/div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <
Parent / >
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
子组件传递数据给父组件
思路:利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。文章来源地址https://www.toymoban.com/news/detail-527432.html
- 父组件提供一个回调函数(用于接收数据)
- 将该函数作为属性的值,传递给子组件
- 子组件通过props调用回调函数
- 将子组件的数据作为参数传递给回调函数
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
// 父组件
class Parent extends React.Component{
state = {
parentMsg:""
}
// 提供回调函数,用来接收数据
getChildMsg = (data)=>{
console.log('接收到子组件中传递过来的数据',data);
this.setState({
parentMsg:data
})
}
render(){
return(
<div className="parent">
父组件:{this.state.parentMsg}
<Child getMsg = {this.getChildMsg}/>
</div>
)
}
}
// 子组件
class Child extends React.Component{
state = {
msg:'刷抖音'
}
handleClick = ()=>{
// 子组件调用父组件传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render(){
return(
<div className="child">
子组件:<button onClick={this.handleClick}>点我,给父组件传递数据</button>
</div>
)
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Parent />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
兄弟组件
- 将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
- 思想:状态提升
- 公共父组件职责:1.提供共享状态 2.提供操作共享状态的方法
- 要通讯的子组件只需通过props接收状态或操作状态的方法
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
// 兄弟组件
// 父组件
class Counter extends React.Component{
state = {
count:0
}
// 提供修改状态的方法
onIncrement = ()=>{
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
<Child1 count = {this.state.count}/>
<Child2 onIncrement = {this.onIncrement}/>
</div>
)
}
}
const Child1 = (props)=>{
return <h1>计数器:{props.count}</h1>
}
const Child2 = (props)=>{
return <button onClick={()=>props.onIncrement()}>+1</button>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Counter />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
到了这里,关于【React组件通讯的三种方式】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!