时间戳

首页 > 解决方案 > 如何在数组中创建 React 元素（使用道具），然后通过简单地映射到该数组来渲染它们？

reactjs - 如何在数组中创建 React 元素（使用道具），然后通过简单地映射到该数组来渲染它们？

问题描述

我想知道是否有一种方法可以在数组中创建元素然后简单地渲染它们，如果可能的话，它会简化我的代码。

现在我正在为一个文件中的页面定义部分，然后将其发送到另一个文件，依此类推，所以目前看起来像这样

const heroSectionProps = { ... }

const pageLayout = {
  sections: [{name: "Hero", props: heroSectionProps}]
}

稍后在渲染页面时，我正在执行以下操作：

import { Hero } from "~/sections"

const section = {
  Hero: Hero
}

export const Page = ({ sections, ...props }) => {

  return sections.map(({ name, props }) => { 
    const Section = section[name];

    return <Section {...props} />
  })
}

这很好用，现在的问题是，是否有可能以某种方式转向看起来更像这样的语法：

import { Hero } from "~/sections"

const heroSectionProps = { ... }

const pageLayout = {
  sections: [Hero(heroSectionProps)]
}

然后在页面中：

export const Page = ({ sections, ...props }) => {

  return sections.map(Section => (<Section />))
}

所以想法是已经在布局对象中创建了组件，然后简单地将它们传递给页面以直接呈现它们。当然，按照上面的方式做，我得到了一个错误：

Warning: React.jsx: type is invalid -- expected a 
string (for built-in components) or a class/function (for composite components) but got: <HeroContainer />. Did you accidentally export a JSX literal 
instead of a component?

和其他类似的关于无效类型。

那么这是否可能，值得以及如何？

标签： reactjs

解决方案

你可以渲染一个数组，只要它填充了可渲染的值（字符串、数字、元素和组件）。所以，假设我们有一个组件数组：

import Hero from '../Hero';

const componentsArray = [<p>Hello world!</p>, <div><img src="images/flower.png" /></div>, <Hero {...heroSectionProps} />];

您可以立即渲染它：

const Component = (props) => {
  //... 

  return componentsArray;
};

推荐阅读