React学习:05 React组件之间如何传递数据

在React中，组件间传递数据通常使用以下方法：

1. 父组件向子组件传递数据：通过props（属性）。
2. 子组件向父组件传递数据：通过回调函数（callbacks）。
3. 兄弟组件间传递数据：使用共享的上下文（Context）或状态管理库（如Redux）。

以下是一个父组件向子组件传递数据的例子：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const data = "这是父组件的数据";
 
  return (
    <ChildComponent childData={data} />
  );
};
 
export default ParentComponent;
 
// 子组件
import React from 'react';
 
const ChildComponent = ({ childData }) => {
  return (
    <div>
      <p>{childData}</p>
    </div>
  );
};
 
export default ChildComponent;

以下是一个子组件向父组件传递数据的例子：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const [message, setMessage] = useState("");
 
  const handleChange = (newMessage) => {
    setMessage(newMessage);
  };
 
  return (
    <div>
      <p>{message}</p>
      <ChildComponent onChange={handleChange} />
    </div>
  );
};
 
export default ParentComponent;
 
// 子组件
import React from 'react';
 
const ChildComponent = ({ onChange }) => {
  const sendDataToParent = (e) => {
    onChange(e.target.value);
  };
 
  return (
    <input type="text" onChange={sendDataToParent} />
  );
};
 
export default ChildComponent;

这些例子展示了React组件间数据传递的基本方法。