React 练习：两个数组由两个 children 渲染并在 parent 中并排显示（匹配索引）

Question

我有一个 parent 组件和两个 child 组件。

主要目标是两个在彼此下面显示 3 个名称（不需要列表，只是为了换行）：

预期结果（三个全名互不列出：

名字 1 姓氏 1
名 2 姓 2
名字 3 姓氏 3

所有名字都在一个数组中 firstName = ["Charles", "Scott", "Peter"] 而所有姓氏都在另一个数组中数组 lastName = ["Xavier", "Summers", "Parker"]

它们应该是过去的 children 组件 (Child1.js) 和 (Child2.js) 作为道具并以前面提到的方式渲染回 App.js。

我当前的代码（下方）首先显示所有 3 个名字，然后显示所有 3 个姓氏。我需要更改什么才能做到这一点？

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from "./Child1.js"
import Child2 from "./Child2.js"

class App extends React.Component {
  render() {
    const firstNames = ["Charles", "Scott", "Peter"];
    const lastNames = ["Xavier",  "Summers", "Parker"]
    return (
      <div>
        <Child1 firstNames={firstNames} /> <Child2 lastNames={lastNames} />
      </div>
    );
  }
}

export default App;

Child1.js（名字）

import React from "react";

class Child1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.firstNames.map((element, index) => (
          <h1 key={index}>{element}</h1>
        ))}
      </div>
    );
  }
}
export default Child1;

孩子 2（姓氏）

import React from "react";

class Child2 extends React.Component {
  render() {
    return (
      <div>
        {this.props.lastNames.map((element, index) => (
          <h1 key={index}>{element}</h1>
        ))}
      </div>
    );
  }
}
export default Child2;

Answer 1

您需要在主要组件内部进行映射，以便在两个数组之间进行迭代：

import React from "react";
import ReactDOM from "react-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";

class App extends React.Component {
  render() {
    const firstNames = ["Charles", "Scott", "Peter"];
    const lastNames = ["Xavier", "Summers", "Parker"];
    return (
      <div>
        {firstNames.map((el, i) => (
          <div key={i} style={{display: 'flex'}}>
            <Child1 firstNames={el} /> <Child2 lastNames={lastNames[i]} />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

然后是 child1

import React from "react";

class Child1 extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.firstNames}</h1>
      </div>
    );
  }
}
export default Child1;

孩子 2 也一样。我运行这个在 codeSandBox 上，它对我有用。

React 练习：两个数组由两个 children 渲染并在 parent 中并排显示（匹配索引）

React exercise: two arrays rendered by two children and displayed next to each other (Matching indexes) in parent

javascript

dictionary

properties

parent-child

reactjs