Question

我对ReactJS很陌生，因为我肯定会突出显示:-) ...到目前为止我很喜欢它，但仍然试图了解很多事情

这就是我想要实现的目标 - 包含嵌套列表的数据列表;

电视节目 - 辛普森一家

姓名：Bart Simpson，性别：男
姓名：Homer Simpson，性别：男
姓名：Ned Flanders，性别：男

电视节目 - 摩登原石

姓名：Fred Flintstone，性别：男
姓名：Barney Rubble，性别：男
姓名：Wilma Flintstone，性别：女

等等......

我在React中经常看到你会创建一个元素来完成一个我喜欢的任务 - 但是你应该在嵌套数据上做些什么呢？我想尝试在上面实现它？

我可能会尝试这样做数百次，所以我不想将这两个列表创建为自己的React元素

我能想到实现这类事情的两种方式是要么拥有嵌套数据，这些数据对于我所追求的内容非常有用，但不确定它是否有效/良好实践...这样的事情

var shows = [
    { id: 1, show: 'Simpsons',
    var characters = [
            { id: 1, name: 'Bart Simpson', gender: 'Male'},
            { id: 2, name: 'Homer Simpson', gender: 'Male'},
            { id: 3, name: 'Ned Flanders', gender: 'Male'},
    },
    { id: 2, show: 'Flintstones',
            { id: 1, name: 'Fred Flintstone', gender: 'Male'},
            { id: 2, name: 'Barney Rubble', gender: 'Male'},
            { id: 3, name: 'Wilma Flintstone', gender: 'Female'}, 
    },
];

或者可能是分组数据，然后以某种方式从他们的节目类型构建表格，并将其余数据列为子数据......

var data = [
    { id: 1, show: 'Simpsons', name: 'Bart Simpson', gender: 'Male' },
    { id: 2, show: 'Simpsons', name: 'Homer Simpson', gender: 'Male' },
    { id: 3, show: 'Simpsons', name: 'Ned Flanders', gender: 'Male' },
    { id: 4, show: 'Flintstones', name: 'Fred Flintstone', gender: 'Male' },
    { id: 5, show: 'Flintstones', name: 'Barney Rubble', gender: 'Male' },
    { id: 6, show: 'Flintstones', name: 'Wilma Flintstone', gender: 'Female' },
];

似乎是一个非常简单的问题，但我还没有找到任何有关如何使用React实现这一目标的信息。

如果有人可以向我指出一些信息，或者为我提供一些可能很棒的信息： - ）

Answer 1

我认为第一种方法是更好的方法，尽管结构不正确。要正常工作，它应该是这样的：

var shows = [
  {
    id: 1,
    show: 'Simpsons',
    characters: [
      { id: 1, name: 'Bart Simpson', gender: 'Male'},
      { id: 2, name: 'Homer Simpson', gender: 'Male'},
      { id: 3, name: 'Ned Flanders', gender: 'Male'}
    ]
  },
  {
    id: 2,
    show: 'Flintstones',
    characters: [
      { id: 1, name: 'Fred Flintstone', gender: 'Male'},
      { id: 2, name: 'Barney Rubble', gender: 'Male'},
      { id: 3, name: 'Wilma Flintstone', gender: 'Female'}
    ]
  }
];

现在你可以拥有一个Show组件，如下所示：

...
import Character from '../Character';

const Show = ({ id, show, characters }) => (
   <div>
     <h1>{show}</h1>
     <ul>
       {
         characters.map(character => (
           <Character
             key={character.id}
             name={character.name}
             gender={character.gender}
           />
         ))
       }
     </ul>
   </div>
 );

 export default Show;
 ...

现在你需要一个Character组件：

...
const Character = ({ name, gender }) => (
   <li><p>{name} | {gender}</p></li>
);

export default Character;
...

我觉得这是我经常使用的一种非常常见的模式，现在您可以在应用中的任何位置使用Show组件。只要确保正确的道具传递给它。如果您需要更多说明，请告诉我！

ReactJS嵌套数据结构

1 个答案: