React 父子组件通信

React中，父组件可以通过props向子组件传递属性。子组件可以通过props接收父组件传递的属性。

import React, { useState } from 'react';

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState('');

  // 更新数据的方法
  const updateData = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <h2>Parent Component</h2>
      <p>Data from Child Component: {data}</p>
      <ChildComponent updateData={updateData} />
    </div>
  );
};

// 子组件
const ChildComponent = ({ updateData }) => {
  const handleInputChange = (e) => {
    // 子组件通过调用父组件传递的方法来更新数据
    updateData(e.target.value);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

// 使用父组件和子组件
const App = () => {
  return (
    <div>
      <ParentComponent />
    </div>
  );
};

export default App;

父组件ParentComponent定义了一个状态data和一个更新状态的方法updateData，然后将updateData方法作为props传递给子组件ChildComponent。子组件中的输入框通过调用updateData方法来更新父组件的数据状态，实现了双向数据传递的效果。