Question

我是React的新手，所以我正在尝试构建一个Pokemon应用程序。我的主要目标是建立20个口袋妖怪的列表，以及从列表中点击口袋妖怪时应该显示所选口袋妖怪细节，图片等的详细信息框。

import React, { Component } from 'react';
import './styles/App.css';

class App extends Component{
    render(){
        return <div className="App">
            <h1> Pokedex! </h1>
            <PokemonList/>
            <PokemonDetail/>
        </div>;
    }
}

class Pokemon extends Component {
    render(){
        const {pokemon,id} = this.props;
        return <div className="pokemon--species">
            <button className="pokemon--species--container">
                <div className="pokemon--species--sprite">
                    <img src={`https://pokeapi.co/media/sprites/pokemon/${id}.png`} />
                </div>
                <div className="pokemon--species--name">{id} {pokemon.name} {pokemon.url} </div>
            </button>
        </div>;
    }
}

class PokemonDetail extends Component {
    render(){
        const {pokemon, id} = this.props;
        return <div className="pokemon--species">
            <button className="pokemon--species--container">
                <div className="pokemon--species--sprite">
                    <img src={`https://pokeapi.co/media/sprites/pokemon/${id}.png`} />
                </div>
                <div className="pokemon--species--name">{id}</div>
                <p>Attack:72</p>
                <p>Defense:23</p>
                <p>Health:99</p>
            </button>
        </div>;
    }
}

class PokemonList extends Component{
    constructor(props){
        super(props);
        this.state = {
            species : [],
            fetched : false,
            loading : false,
        };
    }
    componentWillMount(){
        this.setState({
            loading : true
        });
        fetch('https://pokeapi.co/api/v2/pokemon?limit=20').then(res=>res.json())
            .then(response=>{
                this.setState({
                    species : response.results,
                    loading : true,
                    fetched : true
                });
            });
    }

    render(){
        const {fetched, loading, species} = this.state;
        let content ;
        if(fetched){
            content = <div className="pokemon--species--list">{
                species.map((pokemon,index) => <Pokemon key={pokemon.name} id={index+1} pokemon={pokemon}/>)
            }
            </div>;
        }else if(loading && !fetched){
            content = <p> Loading ...</p>;
        }
        else{
            content = <div/>;
        }
        return  <div className="container">
            {content}
        </div>;
    }
}



export default App;

我知道，那里有很多工作要做，但首先我想了解如何将ID传递给pokemondetails类。

Answer 1

查看react-router和how to pass parameters to components associated with routes。基本上，您可以使用两条路线来呈现以下组件PokemonList和PokemonDetail。将用户从PokemonList重定向到PokemonDetail，并将pokemonId附加到网址（例如“/ details / 23”）。重定向后，将呈现“PokemonDetail”组件，并且组件中将提供pokemonId。

const App = () => (
  <Router>
    <div>
    ...
      <Route exact path="/" component={PokemonList}/>
      <Route path="/details/:pokemonId" component={PokemonDetail}/>
    </div>
  </Router>
)

// access pokemonId
class PokemonDetail extends Component{
  render() {
    return (
      <div>
        <h2>{this.props.params.pokemonId}</h2>
      </div>
    )
  }
}

ReactJS - 道具和课程

1 个答案: