小编Ste*_*ous的帖子

这是初学者的一项有针对性的练习，因此请耐心等待，不要被最新的最佳实践所困扰。

对于本练习，我需要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 { …

我想将此反应组件中的箭头样式函数（在onChange处）更改为普通函数。我是一个初学者，对我来说，同时查看两个版本会很有帮助，因为我很难理解新的箭头函数语法。

应该有可能，但是下面的“使用”普通函数会怎么样？

import React from "react";

function Input1(props) {
  //console.log(props)
  return (
    <div>
      <input
        onChange={event => props.handleChange("email", event.target.value)}
      />
    </div>
  );
}

export default Input1;