Question

我对ReactJS很新，但我认为我取得了一些进展......

我想想我几乎就在那里，但我已经堕落在我认为已经足够接近我最后的障碍的地方了......这就是我所做的事情。我试图实现;

电视节目 - 辛普森一家

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

电视节目 - 摩登原石

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

我可能有数百个，所以我不想在两个React元素中构建这些 - 所以我已经组织了我的数据，我很高兴;

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'}
]
}
];

然后我用表格构建我的数据：

const ShowsTable = (props) => {
    return (
    <div>
      <h1>Show - {props.show}</h1>
      <table>
        <tr>
          <th>Name</th>
          <th>Gender</th>
        </tr>
        <tr>
          <td>XXX</td>
          <td>YYY</td>
        </tr>
      </table>
    </div>
  );
};

我得到了这个＆＃39;工作＆＃39;在哪里我可以从主阵列中获取节目名称和任何内容但我无法从嵌套的字符中获取数据＆＃39;子数组

所以XXX和YYY是我想要获取姓名或性别的数据的地方，在我看来我应该可以做类似的事情......

{props.characters}

或者可能让嵌套元素像

那样

{props.characters.props.name}

但是我无法解决这个问题或找到任何相关的文档 - 这是语法错误还是我错过了一些更基本的东西......也许我在问错误的问题？我真的不确定

如果有人可以通过解释或某些文件向我指出正确的方向，我将非常感激： - ）

Answer 1

您可以执行以下操作：

const ShowsTable = (props) => {
    return (
        <div>
          <h1>Show - {props.show}</h1>
          <table>
              <tr>
                  <th>Name</th>
                  <th>Gender</th>
              </tr>

              {props.characters.map((char, index) => (
                  <tr key={index}>
                      <td>{char.name}</td>
                      <td>{char.gender}</td>
                  </tr>
               ))}    
            </table>
        </div>
    );
};

使用ReactJS从数组中的数组中获取数据

1 个答案: