React-Create-App создает App.js, но в старом синтаксисе js - PullRequest
Новая
       18

React-Create-App создает App.js, но в старом синтаксисе js

0 голосов
/ 11 мая 2019

Я только начал пытаться изучать реагирование и нашел несколько уроков.Все они говорят мне, чтобы запустить npx create-react-app . или что-то подобное.У меня проблема в том, что когда я вижу их App.js, у них у всех есть классы, в то время как у меня function App() {...} вместо class App extends Component.То же самое с оператором импорта тоже.Они говорят import React, { Component } from 'react', а мой говорит import React from 'react' Я не совсем уверен, что не так, и как я могу решить эту проблему?

1 Ответ

0 голосов
/ 12 мая 2019

Существует несколько способов определить компонент React - либо как компонент класса, либо как компонент функции.

В настоящее время последний, функциональный компонент, является в основном предпочтительным способом, если только вы не хотите сделать что-то действительно причудливое с методами жизненного цикла компонента .

Компоненты класса по-прежнему действительны, хотя, и вы часто найдете их в старых учебных пособиях онлайн.

Создать приложение реакции создает функциональный компонент App, чтобы начать работу: 

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Это можно переписать как компонент класса следующим образом: 

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Как видите, это немного более многословно, но совершенно верно.

Вы можете просто заменить функцию классом, который вы нашли в коде примера учебного пособия, которому вы следуете.

Не забудьте импортировать Component в дополнение к react, в данном случае - для компонентов класса, это необходимо, потому что класс должен расширяться Component.

...