Reactjs 是否可以在容器组件的函数之间传递React组件作为参数

将子组件作为参数传递给父组件的函数并尝试进行渲染不起作用

//React容器组件
//基于首选项导入视图和渲染
从“/PosterView”导入PosterView
从“/ListViewCard”导入ListView
...
renderCardsBasedOnType（卡片类型）{
如果（卡片类型==“海报”）{
返回此.renderCards（PosterView）
}否则{
返回此.renderCards（ListViewCard）
}
}
渲染卡（组件）{
让cards=this.props.list.map（函数（cardData）{
返回
})
回程卡
}
render（）{
let cards=此.renderCardsBasedOnType（“海报”）
返回{cards}
}
......

尝试

组件

而不是

组件

。React要求jsx标记使用大写字母：

renderCards(Component){
  let cards =  this.props.list.map(function(cardData){
     return <Component data={cardData}/>
   })
  return cards
}

renderCards（组件）{
让cards=this.props.list.map（函数（cardData）{
返回
})
回程卡
}

多亏了Damien的答案，这里使用带有React的TypeScript给出了相同的答案

而不是这个，即没有包装的简单组件

export const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

---

您可以使用

React.createElement（myLowerCasedComponent）

-我正在学习Javascript教程，并正在动态移植到TypeScript。在TypeScript中，我得到了如下结果：

//PrivateRoute.tsx
类型PropType={
组件：React.ComponentType
}&RouteProps
//封装另一个组件以生成
//仅在用户登录时呈现的组件。如果没有记录
//然后，浏览器被重定向到登录组件。
const privaterote:React.FC=（{component，…rest}）=>{
返回(
isAuth（）(
React.createElement（组件）
) : (
)
}
>
)
}
导出默认PrivateRoute

这意味着我可以这样称呼我的包装器：

类路由扩展React.Component{
render（）：React.ReactElement{
返回(
{/*此处我的参数名为'component'匹配于
其他路由。不是“组件=专用”（ugh）*/}
)
}
}
导出默认路由

这里我的

Private

组件是一个基于React类的标准组件：

}
类型ChangeHandler=（e:React.changevent）=>void
类私有扩展了React.Component{
render（）：JSX.Element{
返回(
{/*这里的东西…*/}
)
}
}

Wow。谢谢你！我只是浪费了两个小时试图弄清楚为什么我的组件没有渲染。这就行了。太糟糕了，下面推荐的JS风格在这里有微妙的副作用…看看你怎么称呼它会很酷。renderCards（）：？

renderCards（foo）

我可以有多个返回吗？如

返回此.renderCards（PosterView）

和

返回此.renderCards（ListViewCard）

而不使用

if

，或者我可以从其他组件调用它们吗？怎样？

const renderContent: FunctionComponent<FunctionComponent> = (Foo: FunctionComponent) => {
  return (
    <div className="foo">
      <Foo />
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  return renderContentOne(SiteMapContent);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

const renderContent: FunctionComponent<ReactElement> = (foo: ReactElement) => {
  return (
    <div className="foo">
      {foo}
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  const foo: ReactElement = <SiteMapContent />;
  return renderContentOne(foo);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}