多层子组件向父组件传递数据

在 React 中，多层子组件向父组件传递数据可以通过回调函数的方式实现。具体来说，父组件可以将一个函数作为 props 传递给子组件，子组件在需要向父组件传递数据时，调用该函数并将数据作为参数传递给它。这样，父组件就可以获取到子组件传递过来的数据了。

举个例子，假设有一个父组件 Parent，它有一个名为 handleData 的函数，用于处理子组件传递过来的数据。Parent 渲染了一个名为 Child 的子组件，并将 handleData 函数作为 props 传递给 Child。Child 在需要向 Parent 传递数据时，调用 handleData 函数并将数据作为参数传递给它即可。

代码示例：

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');

  function handleData(newData) {
    setData(newData);
  }

  return (
    <div>
      <Child onData={handleData} />
      <p>Data received from child: {data}</p>
    </div>
  );
}

export default Parent;

// Child.js
import React from 'react';

function Child(props) {
  function handleClick() {
    props.onData('Hello from child!');
  }

  return (
    <button onClick={handleClick}>Send data to parent</button>
  );
}

export default Child;

在上面的例子中，Child 组件渲染了一个按钮，当用户点击该按钮时，会调用 props.onData 函数并将字符串 'Hello from child!' 作为参数传递给它。Parent 组件中的 handleData 函数会接收到这个参数，并将它保存在 state 中。最后，Parent 组件会在页面上显示从 Child 组件传递过来的数据。