时间戳

首页 > 解决方案 > 将变量发送到 JS 页面/函数

javascript - 将变量发送到 JS 页面/函数

问题描述

我想将一个变量“pokemon”从 Cell.js 发送到 Detail.js。

Cell.js 生成按钮，每个按钮都包含一个口袋妖怪，如果单击它应该打开一个关于口袋妖怪的详细页面。所以我需要将 pokemon（或 pokemon id）发送到 Detail.js 页面。我是 Javascript 新手，我不知道如何将变量发送到另一个 js 页面或函数。

细胞：

import React from 'react';
import './Cell.css';
import {ClassDeclaration as pokemon} from "@babel/types";
import {Link} from 'react-router-dom';
import Detail from "../../Detail";

function Cell({ pokemon }) {
    let id = pokemon.name;
    return (
        <div className="Cell">
            <Link to={`/Detail/${pokemon.name}/`}>
            <div className="Cell_img">
                <img src={pokemon.sprites.front_default} alt="" />
            </div>
            <div className="Cell_name">
                {pokemon.name}
            </div>
            </Link>
        </div>

    );
}
export default Cell;

和详细代码：

import React, {useState} from 'react';
import './Detail.css';
import {ClassDeclaration as pokemon} from "@babel/types";

function Detail({ pokemon }) {

    return (
            <div className="Detail">
                <div className="Detail_img">
                    {pokemon.name}
                </div>
                <div className="Detail_name">
                </div>
            </div>
    );

}

export default Detail;

使成为：

const routing = (
    <Router>
        <div>
            <Route exact path="/" component={App} />
            <Route path="/Detail/:pokemon" component={Detail} />
        </div>
    </Router>
)

ReactDOM.render(routing, document.getElementById('root'));

PS.：我正在使用 React 和 PokeApi ( https://pokeapi.co/ )

标签： javascriptreactjs

解决方案

您有两种解决方案来实现这一目标：

  1. 您可以将整个pokemon对象传递给您的Detail组件。（正如您编写的方式所建议的那样，Detail.js 但是您需要将其pokemon作为道具传递给Route.
<Route
  path='/detail/:pokemon'
  render={(props) => <Detail {...props} pokemon={pokemon} />}
/>
  1. 您可以简单地将 pokemon 的 id 传递给您的Detail组件。
<Route path="/Detail/:id" component={Detail} />

你会这样称呼：

<Link to={`/Detail/${pokemon.id}/`}>

然后在您的Detail组件中，您可以获取 id 以进行新的 API 调用以仅获取一个 Pokemon ：

function Detail(props) {
    [isLoading, setIsLoading] = useState(true);
    [pokemon, setPokemon] = useState(null);

    const fetchPokemon = () => {
        // let's assume an api call return result
        let result = // implement your api call
        setPokemon(result)
        setIsLoading(false)
    }

    useEffect(() => {
        fetchPokemon(props.match.params.id)
    })

    if (isLoading) return <p>Loading</p>
    return (
        <div className="Detail">
            <div className="Detail_img">
                {pokemon.image}
            </div>
            <div className="Detail_name">
                {pokemon.name}
            </div>
        </div>
    );
}

推荐阅读