Question

我想在React中实现的是这样的列表：http://output.jsbin.com/riceduhece

  <ul>
  <span>Mathematics:</span>
  <li><a href="#">Lesson1</a></li>
  <li><a href="#">Lesson2</a></li>
  <li><a href="#">Lesson3</a></li>
  <span>Programming:</span>
  <li><a href="#">Lesson1</a></li>
  <li><a href="#">Lesson2</a></li>
  <li><a href="#">Lesson3</a></li>
  <span>Music:</span>
  <li><a href="#">Lesson1</a></li>
  <li><a href="#">Lesson2</a></li>
  <li><a href="#">Lesson3</a></li>
  </ul>

数学，编程和音乐是科目，他们每人都有3节课。每节课都有相应的超链接。

我尝试了什么？ 我创建了一个包含主题的数组，并且能够遍历它们。

const subjects = ['Mathematics', 'Programming', 'Music'];

{subjects.map(subject => <p className="subject-label" key={subject}>{subject}</p>)}

我在哪里坚持？ 我不知道如何存储/查询所有内容（主题，课程，每节课的URL）。我需要一个对象数组吗？结构应该怎么样？

Answer 1

如何将数据存储在如下对象中：

const data = {
  "Math": [
    { name: "lesson 1", url: "http://google.com" },
    { name: "lesson 2", url: "http://google.com" },
  ],
  "Programming": [
    { name: "lesson 1", url: "http://google.com" },
    { name: "lesson 2", url: "http://google.com" },
  ],
  "Music": [
    { name: "lesson 1", url: "http://google.com" },
    { name: "lesson 2", url: "http://google.com" },
  ]
}

通过使用对象键迭代每个对象数组进行渲染，如下所示：

const Lesson = ({url, name}) => 
  <li>
    <a href={url}>{name}</a>
  </li>;

const Subject = ({ name, lessons }) =>
  <li>
    <h3>{name}</h3>
    <ul>
      {lessons.map(lesson =>
        <Lesson key={lesson.name} {...lesson} />
      )}
    </ul>
  </li>;

const App = () => (
  <div style={styles}>
    {Object.keys(data).map(key => 
      <Subject key={key} name={key} lessons={data[key]} />
    )}
  </div>
);

直播示例：https://codesandbox.io/s/04k5kz6r3l

Answer 2

我希望我能理解你。在我看来，你应该把每个主题都存储为一个对象。

const subjects = [
  {
  type: 'Mathematics',
  lessons: [
    {
      href: 'http://....',
      name: 'Lesson1'
    },...
  ], ... },
  {
  type: 'Programming',
  lessons: [
    {
      href: 'http://....',
      name: 'Lesson1'
    },
    {
      href: 'http://....',
      name: 'Lesson2'
    },...
  ]
}, ...];

然后迭代它并返回您想要的应用程序结构：

<ul>
  {subjects.map(subject => {
    const lessons = subject.lessons.map( s => {
      return <li><a href={s.href}>{s.name}</a></li>
    }
    return (
     <div>
      <span>{subject.type}</span>
      {lessons}
     </div>
    );
  }}
</ul>

我将每个主题都放在一个div中，这样就可以把它放在一起了。

编辑：刚看到基数答案。我会选择他的解决方案。更可读和正确（使用课程类型作为关键）

我应该如何在React中存储主题，课程，URL并将它们输出到列表中？

2 个答案: