React 组件的 children 数据使用

import React from 'react';
 
// 自定义组件，用于包装子元素并处理数据
const DataWrapper = ({ children, dataHandler }) => {
  // 使用children.map来遍历所有子元素，并传递数据处理函数
  const processedChildren = React.Children.map(children, (child, index) => {
    // 如果子元素是一个React组件，我们可以通过props传递数据处理函数
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        dataHandler,
      });
    }
    // 如果不是React组件，直接返回
    return child;
  });
 
  // 使用数据处理函数处理数据
  const processedData = dataHandler(data);
 
  return <div>{processedChildren}</div>;
};
 
// 使用组件的示例
const App = () => {
  // 数据处理函数
  const dataHandler = (data) => {
    // 对数据进行处理，返回处理后的结果
    return data.map(item => item * 2); // 示例：将数据项翻倍
  };
 
  // 示例数据
  const data = [1, 2, 3];
 
  return (
    <DataWrapper dataHandler={dataHandler}>
      <ChildComponent />
      <AnotherChildComponent />
    </DataWrapper>
  );
};
 
// 子组件，接收并使用传递的数据处理函数
const ChildComponent = ({ dataHandler }) => {
  const processedData = dataHandler(data);
  return <div>{processedData}</div>;
};
 
// 另一个子组件，同样接收并使用传递的数据处理函数
const AnotherChildComponent = ({ dataHandler }) => {
  const processedData = dataHandler(data);
  return <div>{processedData}</div>;
};
 
export default App;

这个例子中，我们创建了一个名为DataWrapper的组件，它接收一个dataHandler属性，这是一个用于处理数据的函数。DataWrapper组件还接收children属性，这使得它可以包含任何子元素。在DataWrapper组件内部，我们使用React.Children.map来遍历所有子元素，并通过props将dataHandler传递给每个子元素。同时，我们也展示了如何处理并返回数据。在App组件中，我们定义了两个子组件ChildComponent和AnotherChildComponent，它们接收dataHandler并使用它来处理数据。