时间戳

首页 > 解决方案 > 在 React 中将组件作为 prop 传递并将它们称为 JSX 标签

javascript - 在 React 中将组件作为 prop 传递并将它们称为 JSX 标签

问题描述

假设我有一个包装器组件：

// wrapper that renders component passed as a prop
const Component = (childrenComponent) => <div>{childrenComponent}</div>

我想做的是在某个页面中调用 Component ，例如：

import React from 'react'

const Page = () => {
  const ChildrenComponent = () => <div>Children Component</div>
  return <Component childrenComponent={ChildrenComponent} />
}

这将运作良好。我的问题是，鉴于道具名称应该是小写，我如何更改包装组件代码以能够以 JSX 方式调用 ChildrenComponent（而不是内联 {childrenComponent}，同时满足在 PascalCase 中命名反应组件的要求：

// this will not work
const Component = (childrenComponent) => <div><childrenComponent /></div>

// this will work but the prop name isn't camelCase
const Component = (ChildrenComponent) => <div><ChildrenComponent /></div>

标签： javascriptreactjsjsx

解决方案

你可以Component这样设置：

const Component = props => {
   return (
   <div>{props.children}</div>
   )
}

使用Component：

<Component>
    <ChildrenComponent/>
</Component>

来自文档的更多阅读材料

推荐阅读