React中如何通过JSX将子组件的字符串传递给父组件？

React里数据是单向流动的，子组件没法直接把数据传给父组件，得靠父组件传一个回调函数给子组件，子组件调用这个函数把数据传回去。下面是具体实现步骤和修改后的代码：

实现思路 #

• 父组件定义一个接收数据的函数，把它作为props传给子组件
• 子组件拿到这个回调函数，在需要的时机（比如组件加载、点击按钮）调用它，把要传递的文本传进去
• 父组件用状态保存接收到的文本，按需使用

修改后的代码 #

子组件（ChildData.js）

import { useEffect } from 'react';

function ChildData({ sendTextToParent }) {
  // 要传递的文本内容
  const childText = "Here's the Child Data";

  // 组件挂载时自动传递数据，也可以换成按钮点击等事件触发
  useEffect(() => {
    sendTextToParent(childText);
  }, [sendTextToParent]);

  return (
    <p>{childText}</p>
  );
}

export default ChildData;

父组件（App.js）

import { useState } from 'react';
import ChildData from './ChildData';

function App() {
  // 用状态存储子组件传递过来的文本
  const [receivedChildText, setReceivedChildText] = useState('');

  // 定义接收子组件数据的回调函数
  const handleReceiveText = (text) => {
    setReceivedChildText(text);
  };

  return (
    <div>
      <ChildData sendTextToParent={handleReceiveText} />
      {/* 展示从子组件接收到的文本 */}
      {receivedChildText && <p>父组件收到的内容：{receivedChildText}</p>}
    </div>
  );
}

export default App;

可选：通过点击事件触发传递 #

如果不想组件一加载就传数据，也可以给子组件加个按钮，点击时再传递：

// 修改子组件的return部分
return (
  <div>
    <p>{childText}</p>
    <button onClick={() => sendTextToParent(childText)}>点我把文本传给父组件</button>
  </div>
);

内容的提问来源于stack exchange，提问作者NYC Learner