在 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

Answer 2

我认为这就是你想要做的：

const Component = ({ obj }) => {
  if (obj.type === 'title') {
    return <h1>{obj.value}</h1>;
  }
  if (obj.type === 'subtitle') {
    return <h3>{obj.value}</h3>;
  }
  return <h1>unkown</h1>;
};
const ComponentRender = ({ components }) => (
  <div>
    {components.map((component, i) => (
      <Component key={i} obj={component} />
    ))}
  </div>
);


//render ComponentRender
ReactDOM.render(
  <ComponentRender
    components={[
      { type: 'title', value: 'title' },
      { type: 'subtitle', value: 'subtitle' },
    ]}
  />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>