相对于类型对数组进行反应排序-Java 学习之路

我有一个带有数据的json文件 . 从这个文件我想问问题和问题的类型 . 结构看起来像这样：有一个类别名称图片，然后是一个问题列表 . 这是我的组件，用于呈现问题列表 .

import React from 'react';
import { sortBy } from 'lodash';
import QuestionsListItem from './QuestionListItem';

const images = require.context('../../img', true);
const imagePath = (name) => images(name, true);

const QuestionsList = ({ questions }) => {
  const questionListItem = questions && questions.questions ?
    sortBy(questions.questions, ['type']).map((question) => (
      <>
        {
          const sortType = (question) => {
            if(question.type==='science') {
              <img src={imagePath('./star.png')} alt="star" />
              <p>{question.type}</p>
            }
          }
        }
        <QuestionsListItem
          key={question.id}
          type={question.type}
          question={question}
        />
      </>
    )) : null;
  return (
    <div>
      <ul>
        { sortType }
        { questionListItem }
      </ul>
    </div>
  );
};

一开始，我想用一个类型对数组进行排序，然后我想映射它，然后我想渲染类型，如果 type ===" since " 显示相应的文本和图片 . 在这个元素我得到错误 Parsing error: Unexpected token 并指向 const sortType = (question) => {... . 我不知道如何在React中实现它以获得我想要的效果 . 在哪里插入负责类型和类别图像渲染的代码？

提前致谢：）

1 回答

您在文件的JSX部分中定义了函数 sortType . 这是不允许的 .

而且，在你的 sortType 函数中，你必须返回JSX，当你调用你的函数时，你必须给它 question 作为参数 .

这将是正确的代码：

import React from 'react';
import { sortBy } from 'lodash';
import QuestionsListItem from './QuestionListItem';

const images = require.context('../../img', true);
const imagePath = (name) => images(name, true);

const QuestionsList = ({ questions }) => {

  const sortType = (question) => {
    if(question.type==='science') {
      return (<>
        <img src={imagePath('./star.png')} alt="star" />
        <p>{question.type}</p>
      </>)
    }
  }

  const questionListItem = questions && questions.questions ?
    sortBy(questions.questions, ['type']).map((question) => (
      <QuestionsListItem
        key={question.id}
        type={question.type}
        question={question}
      />
    )) : null;
  return (
    <div>
      <ul>
        { sortType(question) }
        { questionListItem }
      </ul>
    </div>
  );
};

回复于 2024-04-23T21:21:50+08:00

相对于类型对数组进行反应排序

1 回答

相关问题