Javascript 如何将参数从函数组件传递到类组件

编辑-我修复了这个问题并发布了工作代码

我正在做一个项目，我有一个具体的问题，我不知道如何解决。我正在显示一个冠军图片列表，当用户单击其中一个时，它将更改页面以显示冠军名称。目前，我可以在console.log中记录任何名称，而不会出现任何问题，这意味着我的功能组件Newchamp（）正在工作！但是，我在将参数从NewChamp传递到类组件SpecificChamp时遇到了困难。当我在Newchamp return中添加最后一行并尝试使用{s}its undefined在SpecificChamp中显示它时

是否可以将参数从函数类传递到组件类？如果没有，如何使页面更改为单击的特定图像？我是一个新的反应和感谢任何帮助

有谁能帮我解决这个问题吗

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





class AllChamps extends Component  {

 render() {
let champion = this.props.champion;
        return(  
        <div className='champions'>
            <h1> all champions</h1>
            {Object.keys(this.props.champions).map((s) => (
                <div className='champs'     onClick={() => this.props.NewChamp({s, champion})}>        
                    <img   
                        alt='Champion Images'
                        src={`http://ddragon.leagueoflegends.com/cdn/10.16.1/img/champion/${s}.png`}
                        onClick={this.props.onClick}
                     ></img>     
                    {s} 
                </div>
            ))}
        </div>
)}}


class SpecificChamp extends Component  {

    render() {
       let champion = this.props.champion
       let Spec = champion[champion.length - 1];
        return (
            <div className='champions'>
                <h1> 1 champions</h1>
                <div className='champs'>
                    <button    onClick={this.props.onClick}></button>
                    {Spec}
                </div>
            </div>
        )}
}




class Champions extends Component {
    constructor(props) {
        super(props);
        this.handleAllChamps = this.handleAllChamps.bind(this);
        this.handleSpecificChamp = this.handleSpecificChamp.bind(this);
        this.NewChamp = this.NewChamp.bind(this);
        this.state = {
            champions: [],
            champion: [],
            clickedChamp: false,
            thisChamp: 'ahri'
        }}
NewChamp = (props) =>
 {
 let  s = props.s;
 props.champion.push(s);


fetch(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`)
    .then(response => { return response.json() })
    .then((response) => {
        Object.keys(response.data).map((a) => (s = a
        ))})
        fetch(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`)
            .then(response => { return response.json() })
            .then((response) => {
                console.log(s)
                console.log(response.data)

                console.log(props.champion)

                
                
        })
        console.log(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`);

      

        

}

    handleAllChamps = (props) => {
        this.setState({ clickedChamp: true,
           })};
  
    handleSpecificChamp = () => {
        this.setState({ clickedChamp: false,
          })};

    componentDidMount(props) {
        const apiUrl = `http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json`;
        fetch(apiUrl)
        .then(response => { return response.json() })
          .then((response) => {
          this.setState({
              champions: response.data
             
          }, () => (this.state.champions))
      
          return  
      })
   
  }

    render() {
   
        const clickedChamp = this.state.clickedChamp;
        let display;
        if (clickedChamp ) {
            display = <SpecificChamp champion={this.state.champion} onClick={this.handleSpecificChamp} s={this.state.thisChamp}/>;
        } else {
            display = <AllChamps  champions={this.state.champions} onClick={this.handleAllChamps}  NewChamp={this.NewChamp} thisChamp={this.state.thisChamp} champion={this.state.champion} />;
        }
        return (
            <div>
                <div className='champions'></div>

                {display}
            </div>
        );
    }
}

export default Champions;

import React，{Component}来自'React'；
导入“/Champions.css”；
类AllChamps扩展组件{
render（）{
让champion=this.props.champion；
报税表（
所有冠军
{Object.keys（this.props.champions）.map（（s）=>(
this.props.NewChamp（{s，champion}}>
{s}
))}
)}}
类SpecificChamp扩展组件{
render（）{
让冠军=这个。道具。冠军
让Spec=champion[champion.length-1]；
返回(
1冠军
{Spec}
)}
}
类扩展组件{
建造师（道具）{
超级（道具）；
this.handleAllChamps=this.handleAllChamps.bind（this）；
this.handleSpecificChamp=this.handleSpecificChamp.bind（this）；
this.NewChamp=this.NewChamp.bind（this）；
此.state={
冠军：[]，
冠军：[]，
clickedChamp:false，
这位冠军：“ahri”
}}
新冠军=（道具）=>
{
设s=props.s；
道具。冠军。推；
取回(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`）
.then（response=>{return response.json（）}）
。然后（（响应）=>{
Object.keys（response.data）.map（（a）=>（s=a）
))})
取回(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`）
.then（response=>{return response.json（）}）
。然后（（响应）=>{
控制台日志
console.log（response.data）
console.log（props.champion）
})
console.log(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`）；
}
handleAllChamps=（道具）=>{
this.setState（{clickedChamp:true，
})};
handleSpecificChamp=（）=>{
this.setState（{clickedChamp:false，
})};
组件安装（道具）{
常量apiUrl=`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json`;
获取（APIRL）
.then（response=>{return response.json（）}）
。然后（（响应）=>{
这是我的国家({
冠军：response.data
}，（）=>（本州冠军）
返回
})
}
render（）{
const clickedChamp=this.state.clickedChamp；
让展示；
如果（单击Champ）{
显示=；
}否则{
显示=；
}
返回(
{display}
);
}
}
出口违约冠军；

类组件中的渲染函数没有任何

道具

。你应该使用

这个
中的道具，就像你用点击手柄所做的那样

class SpecificChamp extends Component  {

    render() {
        return (
            <div className='champions'>
                <h1> 1 champions</h1>
                <div className='champs'>
                    <button    onClick={this.props.onClick}></button>
                    {this.props.s}
                </div>
            </div>
        )}
}

class SpecificChamp扩展组件{
render（）{
返回(
1冠军
{this.props.s}
)}
}
onClick={（）=>NewChamp（{s}）}
您想做什么？在NewChamp中使用适当的状态管理。你不能直接在那里获取数据。尝试使用useffect@Adam我正在尝试使用它，以便当用户单击其中一个图像时，它会在名为S的正确图像上执行NewChamp函数。然后传入S，以便稍后我可以使用它显示冠军名称on@tmh从控制台开始，数据提取在函数调用think中工作点击。你是说它不会显示，因为我没有使用useEffect？@antiepic，是的，它会在控制台中获取后记录响应，我想知道除了记录之外，你会对响应做什么。顺便说一句，你不需要创建jsx函数来处理onclick，你只需要使用简单的函数，我指的是这个
onclick={（）=>NewChamp（{s}}}
，如果你想渲染
NewChamp
，那么这不是方法。对不起，我在那里做了，不知道发生了什么。即使使用{this.props.s}也不会显示任何内容。当我在h1下面执行{console.log（this.props.s）}时，它会显示“undefined”