Добавьте компонент css в React. js, приложение определено, но никогда не использовало no-unused-vars - PullRequest
0 голосов
/ 04 февраля 2020

Я начал учиться реагировать, создав новое приложение класса, которое расширяет Компонент, но мне было трудно понять концепцию, такую ​​как приведенные ниже коды, но я не уверен, как мне обернуть коды компонентом расширенного класса и методы, которые возвращают ошибку как «App», определены, но никогда не использовали no-unused-vars. Спасибо заранее за вашу помощь и объяснение!

Приложение. js

import React, {
  useState,
  useEffect,
  Component,
} from 'react';
import PokemonList from './PokemonList'
import axios from 'axios'
import Pagination from './Pagination';
import './App.css';



function App() {
  const [pokemon, setPokemon] = useState([])
  const [currentPageUrl, setCurrentPageUrl] = useState("https://pokeapi.co/api/v2/pokemon")
  const [nextPageUrl, setNextPageUrl] = useState()
  const [prevPageUrl, setPrevPageUrl] = useState()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    let cancel
    axios.get(currentPageUrl, {
      cancelToken: new axios.CancelToken(c => cancel = c)
    }).then(res => {
      setLoading(false)
      setNextPageUrl(res.data.next)
      setPrevPageUrl(res.data.previous)
      setPokemon(res.data.results.map(p => p.name))
    })

    return () => cancel()
  }, [currentPageUrl])

  function gotoNextPage() {
    setCurrentPageUrl(nextPageUrl)
  }

  function gotoPrevPage() {
    setCurrentPageUrl(prevPageUrl)
  }

  if (loading) return "Loading..."

   if (loading) return "Loading..."

   return ( <>
     <PokemonList pokemon = {
       pokemon}/> <
     Pagination gotoNextPage = {
       nextPageUrl ? gotoNextPage : null
     }
     gotoPrevPage = {
       prevPageUrl ? gotoPrevPage : null
     }/> </>
   );
}

export default App;

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

class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className="App">
      </div>
    );
  }
}


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...