我制作了 2 个组件:1)内容(使用 fetch() 显示数据)2)分页(共5页，每页16个对象)

我创建了 2 个状态变量，分别称为 start:0 Và end:16。现在，每当用户单击页码时，我都想将开始和结束状态变量从分页组件注入(inject)到内容组件。

将开始和结束变量传递给内容的逻辑如下:最初 end=16*1 (1 被乘以因为第 1 页)和 start= end-16 即 start=0

end = 16*2(2 乘以第 2 页)和 start=end-16 即 start=16

这些开始和结束变量在内容组件的 .slice() 中传递，以便 onClick: 第 1 页应该显示文章 0 到 16第 2 页应该显示第 16 到 32 条，依此类推，直到第 5 页

下面是分页和内容组件的代码:

content.js :

class Content extends Component {

    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true,
            callmatchinfo: false,
            matchid:''
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(this.props.start,this.props.end), <---add new start and end everytime we click on new page number
        loading:false
      });
    })
    }

  viewstats(matchid){
    this.setState({
        callmatchinfo: true,
        matchid: matchid
    });
  }

  rendermatchinfo(){
    return 
  }

    renderMatches() {
        return this.state.matches.map(match => {
            trở lại (
                

                    

                        
MATCH {match.id}

                        
{match.team1}

                        
VS

                        
{match.team2}

                        

                            
WINNER

                            
{match.winner}

                        

                        

                            {this.viewstats(match.id)}} className="btn btn-success">View Stats
                        

                    

                

            );
        })
    }

    render() {

        if (this.state.loading) {
            return 
        }
        else if(this.state.callmatchinfo){
        return 
        }

    trở lại (
      

          

            {this.renderMatches()}
              

          

            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          

      

    );
  }
}

export default Content;

分页.js:

class Pagination extends Component {

    constructor(props){
        super(props)
        this.state = {
            start:0,
            end:16
        };
    }

    handleClick(){
        this.setState{
            end:getpagenumber()*16,
            start:end-16
        }
    }

    getpagenumber(val){
        return val;
    }


  render() {
    let{start,end} = this.state;

    trở lại (
      

        
          
                 
              

               
1

                
2

                
3

                4
                5
              

          

      

    );
  }
}

export default Pagination;

显示匹配文章直到 16 的屏幕截图，即 end=16 :

1 Câu trả lời

您需要一个父组件来实现两个组件之间的通信，例如:

class ParentComponent extends Component {
    state = {
        start: 0,
        end: 16,
    };

    onChangePagination = (start, end) => {
        this.setState({
            start,
            end,
        });
    };

    render() {
        const { start, end } = this.state;
        trở lại (
            

                
                <>
                    onChange={this.onChangePagination} />
            

        );
    }
}

您需要在分页组件中进行另一项更改，即在值更改时调用 onChange 回调。

handleClick() {
    const end = (getpagenumber() * 16);
    const start = (end - 16);
    this.setState({
        end: end,
        start: start,
    });
    this.props.onChange(start, end);
}


renderMatches() {
    // Slide matches before looping, props will have the
    // values from the pagination component.
    return this.state.matches.slice(this.props.start, this.props.end)
        .map(match => (
            

                

                    
MATCH {match.id}

                    
{match.team1}

                    
VS

                    
{match.team2}

                    

                        
WINNER

                        
{match.winner}

                    

                    

                        <>
                            type="button"
                            onClick={ () => this.viewstats(match.id) }
                            className="btn btn-success">
                            View Stats
                    

                

            

        )
    );
}

您可能想要从分页组件中删除本地状态，但实际上您并不需要它。

关于reactjs - ReactJS 如何在组件之间传递数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48506230/