Question

我有2个列表，groupQuestionList和questionList。我正在尝试使用条件渲染，如下所示：

{groupQuestionList
    .map((group, index) => (
        <QuestionGroupHeader key={index} group={group} />,
        questionList
            .map((question, index2) => (
                question.group === group.id 
                ? <QuestionRow key = {index2} question={question} /> 
                : null))
     ))
}

下面是我希望得到的结果

Group A
    Question 1
    Question 2
Group B
    Question 3
    Question 4

以某种方式，仅提出问题，我失去了所有小组。我在<QuestionRow />内尝试了其他类似<QuestionGroupHeader />的方法，但是格式不合适。

任何人都可以请我解释我哪里错了，对此有什么解决办法？谢谢

Answer 1

问题是您从第一个map返回的方式。

您正在使用隐式返回，并且已经将您想要的两件事包装在()中，并用,分隔。这种语法意味着最后一件事就是该表达式返回的内容，因为它是最后求值的内容。

您很可能想使用[]来返回包含两个项目的数组。

.map((group, index) => [
    <QuestionGroupHeader key={index} group={group} />,
    questionList
        .map((question, index2) => (
            question.group === group.id 
            ? <QuestionRow key = {index2} question={question} /> 
            : null))
 ])

Answer 2

根据提供的代码，以下语法将是正确的：

{
    groupQuestionList.map((group, index) => 
        <div>
            <QuestionGroupHeader key={index} group={group} />
            {questionList.map((question, index2) => question.group === group.id && <QuestionRow key={index2} question={question} />)}
        </div>
}

如果您的React版本是最新的，您甚至可以用片段替换div。

使用内联if：&&还可以删除三元条件。

我还建议您在两个数组中存储一个id或唯一的东西，以将它们用作键并获得更好的性能。

带有条件渲染的渲染组件

2 个答案: