如何修复 React.js 中的箭头功能以使用道具

Question

我正在尝试在 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

App.js 代码如下：

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;

预期结果：

网页在 localhost:3000 上显示 "Aloha you nutter! How's it going {name property goes here}?" 3 次，使用 3 个不同的名称。

Answer 1

这样试试：

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

export default Greet

props 是箭头函数中的参数。

如何修复 React.js 中的箭头功能以使用道具

How to fix arrow function in React.js to work with props

javascript

ecmascript-6

reactjs

arrow-functions

react-props