reactjs - ReactJS 如何在组件之间传递数据？

Question

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

我创建了 2 个状态变量，分别称为 start:0 和 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 <Matchinfo matchid={this.state.matchid} />
  }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div className="col-lg-3">
                    <div id="content">
                        <p className="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div className="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div className="stats">
                            <button type="button" onClick= {()=>{this.viewstats(match.id)}} className="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
        }
        else if(this.state.callmatchinfo){
        return <Matchinfo match_id={this.state.matchid} />
        }

    return (
      <div>
          <div className="row">
            {this.renderMatches()}
              </div>
          <div className="row">
            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          </div>
      </div>
    );
  }
}

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;

    return (
      <div>
        <Content/>
          <div className="container">                 
              <ul className="pagination">
               <li {this.getpagenumber(1)} onClick={this.handleClick}><a href="#">1</a></li>
                <li {this.getpagenumber(2)} onClick={this.handleClick}><a href="#">2</a></li>
                <li {this.getpagenumber(3)} onClick={this.handleClick}><a href="#">3</a></li>
                <li{this.getpagenumber(4)} onClick={this.handleClick}><a href="#">4</a></li>
                <li{this.getpagenumber(5)} onClick={this.handleClick}><a href="#">5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

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

Answer 1

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

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

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

    render() {
        const { start, end } = this.state;
        return (
            <div>
                <Content start={start} end={end} />
                <Pagination
                    onChange={this.onChangePagination} />
            </div>
        );
    }
}

您需要在分页组件中进行另一项更改，即在值更改时调用 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 => (
            <div className="col-lg-3">
                <div id="content">
                    <p className="match">MATCH {match.id}</p>
                    <h4>{match.team1}</h4>
                    <p>VS</p>
                    <h4>{match.team2}</h4>
                    <div className="winner">
                        <h3>WINNER</h3>
                        <h4>{match.winner}</h4>
                    </div>
                    <div className="stats">
                        <button
                            type="button"
                            onClick={ () => this.viewstats(match.id) }
                            className="btn btn-success">
                            View Stats</button>
                    </div>
                </div>
            </div>
        )
    );
}

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