Question

在我的div中，我有一个函数可以根据对象中存在的内容来呈现组件。但是，即使cat.comp返回实际的功能组件，也不会呈现。

这是我的渲染功能：

{cardsInGrid.map((card) => {
            sideBarCategories.map((cat) => {
              if (card.id === cat.id) {
                const Component = cat.comp;
                return <Component key={card.id} />;
              }
            });
          })}

Answer 1

第一个map不会返回任何内容。您需要return元素数组：

          {cardsInGrid.map((card) => {
            return sideBarCategories.map((cat) => {
              if (card.id === cat.id) {
                const Component = cat.comp;
                return <Component key={card.id} />;
              }
            });
          })}

但是，这将导致二维数组，因此您需要将其展平。一种方法是将其移出组件树并创建一维数组。例如，类似于：

const elements = [];

cardsInGrid.forEach(card => {
  sideBarCategories.forEach(cat => {
    const Component = cat.comp;
    elements.push(<Component key={card.id + cat.id} />);
  });
});

return <>{elements}</>;

经过进一步的讨论，听起来您只有一个组件，并且想要找到该特定类别并进行渲染。在这种情况下，我建议使用find（或等效逻辑）。例如：

{cardsInGrid.map(card => {
  const Component = sideBarCategories.find(cat => cat.id === card.id).comp;
  return <Component key={card.id} />;
})}

Answer 2

您的第一个return方法中缺少map。您应该添加它：

{
  cardsInGrid.map((card) => {
    return sideBarCategories.map((cat) => {
      if (card.id === cat.id) {
        const Component = cat.comp;
        return <Component key={card.id} />;
      }
    });
  });
}

或者您可以使用隐式返回：

{
  cardsInGrid.map((card) =>
    sideBarCategories.map((cat) => {
      if (card.id === cat.id) {
        const Component = cat.comp;
        return <Component key={card.id} />;
      }
    })
  );
}

组件未渲染（ReactJS / MaterialUI）

2 个答案: