Javascript 如何修复React.js中的箭头函数以使用道具

我正试图在localhost:3000上打开一个简单的网页，并且正在使用React.js-目前看来，使用React.js，当我键入“=>”时，它无法识别我的箭头函数，并且我已经检查了下面的教程，以确保我没有输入任何错误-是否有其他人遇到React.js和箭头函数的问题

有趣的是，在我正在观看的教程中，它工作得很好

非常感谢

重新检查代码，检查App.js，在React.js中搜索箭头函数错误

Greet.js代码如下：

import React from 'react'

// function Greet() {
//     return <h1>Hey Henry!</h1>
// }

const Greet = props () => {
    console.log(props)
    return <h1>Aloha you nutter! How's it going {props.name}?</h1>}

export default Greet

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Hello from './components/Hello'

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*<header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            HELLO WORLD!!!
            Henry's first React program!
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
    </header>*/}
      <Greet name="Henry" />
      <Greet name="Adrian" />
      <Greet name="Lordi" /> 
      {/*<Hello />*/}


      </div>
    );
  }
}

export default App;

从“React”导入React
//函数{
//回来嘿，亨利！
// }
const Greet=props（）=>{
控制台日志（道具）
回归阿罗哈，你这个疯子！进展如何{props.name}？}
导出默认问候语

App.js代码如下：

import React from 'react'

// function Greet() {
//     return <h1>Hey Henry!</h1>
// }

const Greet = props () => {
    console.log(props)
    return <h1>Aloha you nutter! How's it going {props.name}?</h1>}

export default Greet

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Hello from './components/Hello'

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*<header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            HELLO WORLD!!!
            Henry's first React program!
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
    </header>*/}
      <Greet name="Henry" />
      <Greet name="Adrian" />
      <Greet name="Lordi" /> 
      {/*<Hello />*/}


      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/Greet”导入问候语
从“./components/Hello”导入Hello
类应用程序扩展组件{
render（）{
返回(
{/*

你好，世界！！！
亨利的第一个反应程序！

*/}
{/**/}
);
}
}
导出默认应用程序；

预期结果：

网页在localhost:3000上显示“你好，疯子！进展如何{name property goes here}？”3次，使用3个不同的名称

试着这样做：

const Greet = (props) => {
    console.log(props)
    return <h1>Aloha you nutter! How's it going {props.name}?</h1>}

export default Greet

const Greet=（道具）=>{
控制台日志（道具）
回归阿罗哈，你这个疯子！进展如何{props.name}？}
导出默认问候语

道具是箭头函数中的参数。

尝试如下操作：

const Greet = (props) => {
    console.log(props)
    return <h1>Aloha you nutter! How's it going {props.name}?</h1>}

export default Greet

const Greet=（道具）=>{
控制台日志（道具）
回归阿罗哈，你这个疯子！进展如何{props.name}？}
导出默认问候语

---

Props是arrow函数中的params。

查看MDN以了解错误函数的语法：请检查Greet.js文件中的语法。将“props”放在括号内，如果只有1个参数，则不要使用括号。例如：-const Greet=props=>{}应该可以工作。查看MDN以了解错误函数的语法：请检查Greet.js文件中的语法。将“props”放在括号内，如果只有1个参数，则不要使用括号。例如：-const Greet=props=>{}应该有效。谢谢大家的帮助：-）谢谢大家的帮助：-）