如何将参数从功能组件传递到类组件

Question

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

我正在处理一个项目，但遇到了一个具体问题，我不知道如何解决。我正在显示一个冠军图像列表，当用户单击其中一个时，它将更改页面以显示该冠军名称。目前我可以 console.log 任何名称没有任何问题，这意味着我的功能组件 Newchamp() 正在工作！但是，我无法将参数从 NewChamp 传递给类组件 SpecificChamp。当我在 Newchamp return 中添加最后一行并尝试使用 {s} 在 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;

Answer 1

类组件中的render函数没有props。您应该使用来自this 的道具，就像您使用手柄点击所做的那样。

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>
        )}
}