javascript - 如何通过 3 类组件传递数据以正确使用react？

Question

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

对于这个练习，我需要 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

你遇到的一个问题是传递 props 时

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

你应该像这样传递它

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

如果你输入 is 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 并在导入时按名称导入(在 {} 内)，因为您导入的方式是获取默认导出。

应该是这样的

// 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有一个工作示例。请看看它是如何工作的，尝试一下并尝试从中学习。希望这有帮助；)