在使用 React.Children API 修改子项后，如何在 React 中将 return 子项作为函数？

Question

我确实有这样的组件层次结构

const Parent = ({ children }) => {
    const modifiedChildren = React.Children(children, (child) => {
        return React.cloneElement(child, {...child.props, extraProp: "someValue"})
    })
    return modifiedChildren
}

const App = () => {
    return (
        <Parent>
            <div>First</div>
            <div>Second</div>
            <div>Third</div>
        </Parent>
    )
}

它工作正常，但我想 return 子组件作为 Parent 组件的函数。

所以我的问题是如何 return children 作为 Parent 的函数，当你需要首先通过添加一些道具等来操纵 children 时

编辑

我的目标是这样的...

const Parent = ({ children }) => {
    const data = "some dynamic data"

    // here I want to modify children first, as I need to add some props dynamically
    
    return children(data)
}

const App = () => {
    return (
        <Parent>
            {(data) => (
                <>
                    <div>First</div>
                    <div>Second</div>
                    <div>Third</div>
                </>
            )}
        </Parent>
    )
}

Answer 1

如果我正确理解您的（更新的）目标，则以下代码应该有效：

const Parent = ({ children }) => {
    const data = "some dynamic data";
    // Call any children specified as functions, passing in data
    let modifiedChildren = children.map((child) =>
      typeof child === 'function' ? child(data) : child);
    // modify modifiedChildren as necessary
    return modifiedChildren;
}

Function-specified children 就是 children。在您的示例中，children 将是一个长度为 1 的数组，唯一的项目等于一个函数。在上面的代码中，我调用了任何 function-specified children。您可以改为检查数组的大小是否为 1 并具有单个函数，然后在这种情况下做一些特殊的事情。

在使用 React.Children API 修改子项后，如何在 React 中将 return 子项作为函数？

How to return child as a function in React after modifying the children with React.Children API?

children

parent-child

reactjs