React组件通信方式总结

父组件向子组件传递数据

无论是类组件还是函数式组件，父组件向子组件传递数据的方式都是使用 props 来实现的

函数式组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
function ParentComponent() {  const message = 'Hello from Parent!';  return <ChildComponent message={message} />;  
}  
export default ParentComponent;  // 子组件（通过函数参数接收）
import React from 'react';  
function ChildComponent({ message }) {  return <div>{message}</div>;  
}  
export default ChildComponent;

类组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
class ParentComponent extends React.Component {  render() {  const message = 'Hello from Parent!';  return (  <div>  <ChildComponent message={message} />  </div>  );  }  
}  
export default ParentComponent;// 子组件（通过 `this.props` 接收）
import React from 'react';  
class ChildComponent extends React.Component {  render() {  const { message } = this.props;  return (  <div>{message}</div>  );  }  
}  
export default ChildComponent;

---

子组件向父组件传递数据

无论是类组件还是函数式组件，子组件向父组件传递数据的方式都是通过 回调函数 来实现的

• 父组件自定义函数，用来接收数据，并将函数通过 props 传递给子组件
• 子组件调用父组件传递的函数并传递数据

函数式组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
function ParentComponent() {  const handleDataFromChild = (data) => {  console.log('Received data from child:', data);  // 在这里处理从子组件接收到的数据  }  return (  <div>  <ChildComponent onDataReceived={handleDataFromChild} />  </div>  ); 
}  
export default ParentComponent;  // 子组件
import React from 'react';  
function ChildComponent({ onDataReceived }) {  const handleClick = () => {  const data = 'Hello from Child!';  onDataReceived(data); // 调用父组件传递的回调函数并传递数据  }  return (  <button onClick={handleClick}>Send Data to Parent</button>  );  
}  
export default ChildComponent;

类组件：

// 父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
class ParentComponent extends React.Component {  handleDataFromChild = (data) => {  console.log('Received data from child:', data);  // 在这里处理从子组件接收到的数据  }  render() {  return (  <div>  <ChildComponent onDataReceived={this.handleDataFromChild} />  </div>  );  }  
}  
export default ParentComponent;// 子组件
import React from 'react';  
class ChildComponent extends React.Component {  handleClick = () => {  const data = 'Hello from Child!';  this.props.onDataReceived(data); // 调用父组件传递的回调函数并传递数据  }  render() {  return (  <button onClick={this.handleClick}>Send Data to Parent</button>  );  }  
}  
export default ChildComponent;

---

兄弟组件传值

状态提升：父组件维护一个状态（state），这个状态将被传递给两个兄弟组件。

兄弟A数据 => 父 => 兄弟B数据

1. 兄弟组件A：兄弟组件A通过向父组件传递数据
2. 父组件：接收兄弟组件A传递过来的数据，并通过 props 传递给 兄弟组件B
3. 兄弟组件B：接收父组件过来的数据，该数据即为兄弟组件A组件的数据

函数式组件：

// 父组件  
import React, { useState } from 'react';  function ParentComponent() {  const [data, setData] = useState(null);  const handleDataChange = (newData) => {  setData(newData);  };  return (  <div>  <SiblingA onDataChange={handleDataChange} />  <SiblingB data={data} />  </div>  );  
}  // 兄弟组件A  
function SiblingA({ onDataChange }) {  // 假设这里有一个方法触发数据改变  const triggerDataChange = () => {  const newData = 'Hello from Sibling A!';  onDataChange(newData);  };  return (  <button onClick={triggerDataChange}>Send Data to Sibling B</button>  );  
}  // 兄弟组件B  
function SiblingB({ data }) {  return <div>{data}</div>;  
}

类组件：

// 父组件  
class ParentComponent extends React.Component {  state = { data: null };  handleDataChange = (newData) => {  this.setState({ data: newData });  };  render() {  return (  <div>  <SiblingA onDataChange={this.handleDataChange} />  <SiblingB data={this.state.data} />  </div>  );  }  
}  // 兄弟组件A  
class SiblingA extends React.Component {  // 假设这里有一个方法触发数据改变  triggerDataChange = () => {  const newData = 'Hello from Sibling A!';  this.props.onDataChange(newData);  };  render() {  return (  <button onClick={this.triggerDataChange}>Send Data to Sibling B</button>  );  }  
}  // 兄弟组件B  
class SiblingB extends React.Component {  render() {  return <div>{this.props.data}</div>;  }  
}