Question

我发现了一些关于如何使用React将ONE prop传递给动态chidren的示例/帖子，如：

return React.cloneElement({this.props.children}, { parentValue: this.props.parentValue });

然而传递多个或所有道具似乎将事物发送到递归循环中，最终导致应用程序崩溃：

return React.cloneElement({this.props.children}, { parentValue1: this.props.parentValue1, parentValue2: this.props.parentValue2});

或..

return React.cloneElement({this.props.children}, {...this.props});

是否有将多个（或所有）道具传递给动态儿童的有效方法？似乎如果你可以为一个或多个静态孩子，你应该能够，如果他们碰巧是动态的。

Answer 1

你可以这样做

import React from 'react'
export default class Container extends React.Component {
    render() {
        return (
            <div>
                {React.cloneElement(this.props.children, {...this.props})}
            </div>
        )
    }
}

从现在起，任何放在容器中的元素都会有容器的道具

<Container><ContactPage /></Container>
// contactPage will have all props from container

Answer 2

别忘了将儿童排除在道具之外，以便进一步传递。我花了很多时间来理解为什么我有一个循环。您可以阅读有关此问题的更多here

render() {
  const { children, ...otherProps } = this.props

  return React.cloneElement(this.props.children, otherProps)
}

React将所有/多个道具传递给动态孩子 - 最好没有上下文

2 个答案: