Как исправить функцию стрелки в React.js для работы с реквизитом

#javascript #reactjs #ecmascript-6 #arrow-functions #react-props

#javascript #reactjs #ecmascript-6 #стрелка-функции #реагировать-реквизит

Вопрос:

Я пытаюсь открыть простую веб-страницу на localhost: 3000 и работаю с React.js — в настоящее время кажется, что использование React.js , он не распознает мою функцию стрелки, когда я набираю ‘=>’, и я проверил с помощью руководства, которому я следую, чтобы убедиться, что я не сделаллюбые опечатки — кто-нибудь еще сталкивался с проблемами с React.js а функции стрелок?

Интересно, что в учебнике, который я смотрю, он отлично работает,

Заранее большое спасибо!

Перепроверил код, проверил App.js , ошибки функции стрелки в Google в 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;

  

Ожидаемый результат:

Веб-страница отображается на локальном хосте: 3000 с надписью «Алоха, ты псих! Как дела {свойство name идет сюда}?» 3 раза с 3 разными именами.

Сообщение об ошибке на локальном хосте: 3000

Комментарии:

1. Взгляните на MDN, чтобы узнать о синтаксисе функций ошибок: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

2. пожалуйста, проверьте свой синтаксис в Greet.js досье. Либо поместите ‘props’ в круглые скобки, либо не используйте круглые скобки, если есть только 1 аргумент. Например:- const Приветствие = реквизит => {} должно работать.

Ответ №1:

Попробуйте так:

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

export default Greet
  

Реквизит — это параметры в функции стрелки.

Комментарии:

1. Спасибо всем за вашу помощь 🙂