首页 文章

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

提问于
浏览 1682
0

我有一个带有数据的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 回答

  • 0

    您在文件的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>
      );
    };
    

相关问题