Javascript 如何通过react中的3个类组件传递数据？

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

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

Main.js:它基本上只包含一个数组

List.js:它通过该数组进行映射，并随着每次迭代将数组的元素传递给Item.js

Item.js:这里您将渲染映射的数组

我对前两个部分很有信心，但无法从2跳到3谁不仅可以发布答案，还可以评论出关键想法？谢谢

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

Main.js

import React from "react";

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

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;

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;

List.js

import React from "react";

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

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;

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;

从“React”导入React；
从“Main.js”导入Main，{avengers}；
类列表扩展了React.Component{
render（）{
返回(
{复仇者地图（（超级英雄，索引）=>
)}
);
}
}
导出默认列表；

Item.js

import React from "react";

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

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;

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;

从“React”导入React；
从“react dom”导入react dom；
从“/List.js”导入列表；
类项扩展了React.Component{
render（）{
返回(
{这个。道具。超级英雄}
);
}
}
导出默认项；

传递道具时会遇到一个问题

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

及

在第一行中，您创建了

avangers

，但从未

导出它，因此您希望能够
导入它

您需要做的是添加
导出
，导入时，按名称导入（在
{}
内），因为您导入的方式是获得
默认的
导出

这就是它应该是什么样子

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

及

编辑2
不确定这是否是你想要的，但我会猜

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

export default Item;

类项扩展React.Component{
render（）{
返回(
{这个。道具。超级英雄}
);
}
}
导出默认项；

最后编辑
我给了你一个有用的例子。请看一看，看看它是如何工作的，玩玩它，并尝试从中学习。希望这有帮助；）
 关键思想应该是
key={index}
；）谢谢。。。更新。原因是，我用花括号在JSX中输入javascript，对吗？@Stephan thecurious抱歉我不能正确理解你，原因是什么？我用花括号代替引号的原因。Item.js作为通过道具的类组件会是什么样子？@Stephan thecurious在哪里？什么文件？什么线路？你的文件结构是什么？是否确实从正确的文件导入？请更具体一点，我正试图帮助你，但我需要更多的信息