如何正确地通过 3 个类组件传递数据？

Question

这是一个反应初学者练习，所以请耐心等待，不要被最新的最佳实践淹没。

对于这个练习，我需要 3 个类组件：

1. Main.js: 基本上只包含一个数组
2. List.js： 映射通过该数组，每次迭代将数组元素传递给 Item.js
3. Item.js：在这里渲染映射数组

我对前两个组件很有信心，但无法从 2 跳到 3。谁不仅可以发布答案，还可以注释掉关键思想？谢谢！

到目前为止我对 Main.js 和 List.js 的了解

Main.js

import React from "react";

export const avengers = ["Ironman", "Thor", "Hulk", "Hawkeye", "Black Widow"]

List.js

import React from "react";
import Main, { avengers } from "Main.js";


class List extends React.Component {
    render() {
        return (
            <div>
                {avengers.map((superhero, index) =>
                    <Item key={index} superhero={superhero}/>
                )}
            </div>
        );
    }
}

export default List;

Item.js

import React from "react";
import ReactDOM from "react-dom";
import List from "./List.js";

class Item extends React.Component {
  render() {
    return (
          <div>
            {this.props.superhero}
          </div>
    );
  }
}

export default Item;

Answer 1

您遇到的一个问题是传递道具时

<Item key="index" superhero="{superhero}" />

你应该像这样传递它

<Item key={index} superhero={superhero} />

如果你输入的是 ass someProp="something"，你只是在传递一个字符串。

如果你想传递一个变量，你需要像someProp={someVariable}一样传递它

并且 prop 可以在 Item 内部访问，例如 this.props.someProp（如果它是类组件，或者 props.someProp 如果是功能组件，其中 props 是您的功能组件的参数。

编辑

我刚刚在您的代码中看到的一个错误是这两行

const avengers = ["Ironman", "Thor", "Hulk", "Hawkeye", "Black Widow"]

和

import avengers from "Main.js";

在第一行，你创建了avangers，但你从来没有export它，所以你希望能够import它。

您需要做的是添加export 并在导入时按名称（在{} 内）导入它，因为您导入的方式是default 导出。

所以应该是这样的

// added export
export const avengers = ["Ironman", "Thor", "Hulk", "Hawkeye", "Black Widow"]

和

// importing avengers correctly
import Main, { avengers } from "Main.js";

编辑 2

不确定这是不是你想要的，但我会猜

class Item extends React.Component {
  render() {
    return (
          <div>
            {this.props.superhero}
          </div>
    );
  }
}

export default Item;

上次编辑

我通过一个工作示例为您创建了 codesandbox。请看看它是如何工作的，玩弄它并尝试从中学习。希望这会有所帮助；）