如何将反应儿童呈现为 <Children /> 而不是 {children} [重复]答案

【问题标题】：How to render react children as a <Children /> and not {children} [duplicate]如何将反应儿童呈现为 <Children /> 而不是 {children} [重复]
【发布时间】：2021-06-20 04:56:55
【问题描述】：

我有一个简单的组件：

const Test = ({header}) => <View> <Header /> </View>`

然后这样称呼它：

<Test header={<View> Test </View} />

但它没有说：

JSX 元素类型 'Header' 没有任何构造或调用签名

我该如何解决这个问题？我需要像<Header /> 那样渲染它，这样我就可以将更多的道具传递给它

我不想像 {header} 这样渲染它。

【问题讨论】：

@AjeetShah 因为 1. 它是一个组件，所以应该像一样呈现 2 我需要将道具传递给它
@RedBaron 不，不应该。只要是React.Node，接收组件就会渲染它。
我需要传递一个道具吗？我该怎么做？
这是因为你试图直接渲染像{data} 这样的东西，而不是你想要渲染的实际信息，比如{data.title}。
啊我是个白痴而不是破坏

标签： javascript reactjs react-native

【解决方案1】：

你可以这样：

const Test = ({children}) => <View> {children} </View>

并像这样使用它：

<Test>
  <Header/>
</Test>

更多信息请阅读文档composition-vs-inheritance

【讨论】：

我不能因为标题！=标题
对不起，我更新了我的答案

【解决方案2】：

如果您想将道具传递给您的孩子，请查看带有 cloneElement 函数的 React API

您可以使用React.Children 教您的孩子

function Component({ children, ...props }) {
    const newChildren = React.Children.map(children, child => {
        return React.cloneElement(child, { ...child.props, ...props });
    });
   return (
       <div>
          {newChildren}
       </div>
);

}

【讨论】：

【解决方案3】：

你可以试试这个

const Test = ({header})=>{
  
  return <View>
   {React.cloneElement(header, ObjectContainingPropsYouWantToPass)}
  </View>
}

source

【讨论】：

正是我的意思。我只是在证明将header 称为<Header/> 是没用的

【解决方案4】：

如果你想达到这个目的，请告诉我

const 测试 = ({header: Header}) => <View> <Header /> </View>

【讨论】：

欢迎。通常将这种类型的建议添加为问题的评论而不是答案（显然不是）更有用。这可能解释了您收到的反对票。