在ReactJS中渲染组件数组

Question

我正在尝试使用不同的jsx组件构建此数组。我有一个函数，向该数组添加组件，然后将其返回。

let components = [];
switch (obj.type) {
case 'title':
      components.push = (
          <>
            <Grid item xs={12} md={8}>
              <h1>{obj.value}</h1>
            </Grid>
          </>
        );
        break;
  case 'subtitle':
        components.push = (
          <>
            <Grid item xs={12} md={8}>
              <h3>{obj.value}</h3>
            </Grid>
          </>
        );
        break;
 }

return components;

[当我尝试呈现它时，它呈现空白。我想知道我在做错什么，或者什么是实现此目标的正确方法。

const ComponentRender = ({ components }) => (
    <div>
      {components.map((component, i) => (
        <div key={i}>{component}</div>
      ))}
    </div>
  );

return <ComponentRender components={components} />;

Answer 1

您正在分配推送而不是使用功能

代替components.push = item做components.push(item)