如何在React中将道具传递给{children}？[副本]
我有一个父组件，充当其子组件的包装器。如何将道具传递给将使用以下格式呈现的孩子？
import React, { useEffect, useState } from 'react';
const Parent = ({ children }) => {
const [completeState, setCompleteState] = useState(false);
useEffect(
() => {
/* .. code that runs then sets completeState to true */
setCompleteState(true);
}, []
);
return (
<section>
/*
how to pass a 'didComplete' prop to children?
didComplete={completeState}
*/
{children} // Child component below would be rendered here with the didComplete prop passed in
</section>
)
}
import React from 'react';
const Child = ({ didComplete }) => (<h1>The function completed? {didComplete}</h1>);
共有2个答案
你可以用
return (
<section>
<Child didComplete={completeState} />
</section>
);
props.children是一个React Element，它只不过是一个简单的JS对象，它描述了需要在DOM中呈现的内容。
为了提供更多的细节，我们需要克隆现有的React Element对象并提供更多的细节。
为此，我们可以使用React.cloneElementAPI将附加的道具传递给子对象：
return (
<section>
{React.cloneElement(children, {didComplete: completeState})}
</section>
);
-
我试图使用{children}将道具传递给子组件。 父亲组件： 子组件： 像这样使用它们： 我想把来自FatherComp的道具直接传递给ChildComp： 是否有可能实现我试图直接使用react功能组件而无需状态管理的目标？ 谢谢
-
我使用的是dev-express中的react-grid库，库中有一个表组件，我们可以向它传递单元格组件，在CustomCell中，我使用的是Material UI中的菜单 在上述情况下,菜单工作良好, 但是我想要传递道具到这个组件，我尝试了以下操作 在这种情况下菜单不工作，我想知道是否有一个替代的方法来实现第二种情况。
-
问题内容： 我试图找到定义可以以一般方式使用的组件的正确方法： 当然，可以想象并在父组件和子组件之间进行渲染的逻辑。 对于这个问题，这是一个虚拟的实现： 问题是，每当您用于定义包装器组件时，如何将某些属性传递给其所有子组件？ 问题答案： 用新道具克隆Children 您可以使用React.Children遍历子级，然后使用React.cloneElement使用新的道具（浅合并）克隆每个元素，例如
-
我想在React中将数据从子组件发送到父组件。查找数据时，只有类类型，没有功能文档。您可以使用什么语法传递数据？
-
问题内容： 我需要使用路由器将道具传递到组件。这是我的代码： 如您所见，isAuthenticated我想传递给Login组件的道具。 当我登录道具时， isAuthenticated 道具不存在。我做错了什么？如何正确通过道具？我关注了文档以及其他讨论。据我了解，它应该可以工作。的版本 做出反应路由器 和 反应路由器- DOM 是 4.0.0 问题答案： 像这样传递它： 它应该在“登录组件”中可
-
我是一个相当新的反应，这是一个我正在努力解决的问题。