Question

我想知道是否有办法从孩子到另一个孩子调用方法？例如，用户点击“最近”头表。然后调用props.func并使用“rearangeList”方法绑定。但它停在那里，无法达到TableContent中的方法“content”。有谁能告诉我出了什么问题？

//Get the users API leaderboard
function ajaxCall(callback){
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(json30){
  $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/alltime", function(jsonAll){
    json30.forEach(function(j30){
      var i = 0;
      jsonAll.forEach(function(jAll) {
        i++;

        if(jAll.username == j30.username) {i = 0; return false;} 
        else if(i == jsonAll.length) {
          // Join json that is not appeared in the json alltime score
          jsonAll = jsonAll.concat([
            {
              "username": j30["username"],
              "img": j30["img"],
              "alltime": j30["alltime"],
              "recent": j30["recent"],
              "lastUpdate": j30["lastUpdate"]
            }
          ]);
        };       
      });
    });
    callback(jsonAll);
  });
});
}



ajaxCall(function(jsonAll) { 


 class LeaderBoard extends React.Component {

      //call method from TableContent

      rearangeList(title){this.child.content(title)}

      render() {

        return (
              <div className="container">
                <table>
                  <thead>
                    <tr>
                      <th>
                        User
                      </th>
                      <TableHead func={this.rearangeList} titleHead="Most Recent"/>
                      <TableHead func={this.rearangeList} titleHead="All Time"/>
                    </tr>
                  </thead>
                    <TableContent onRef={ref => (this.child = ref)} />
                </table>
               </div>
        );
      }
 }

  class TableContent extends React.Component {

    componentDidMount(){
      this.props.onRef(this);
    }
    componentWillUnmount() {
      this.props.onRef(null)
    }

    content(title = null) {
      var constr = "";
      var i = 1;
      console.log(title)

      jsonAll.forEach(function(el){
        constr += "<tr>" +
          "<td class='user'>"+
          "<img class='avatar' src='"+ el.img+"' alt='avatar'/>" +
          "<span class='user-tag'>" + el.username +"</span>"+
          "</td>"+
          "<td class='number'>"+ el.recent +"</td>" +
          "<td class='number'>"+ el.alltime + "</td>" +
          "</tr>" ;
        i++;
      });
      return constr;
    }

    render() {

      return (  
              <tbody dangerouslySetInnerHTML={{ __html: this.content() }}>
              </tbody>
             );

     }
  } 


class TableHead extends React.Component {

    constructor() {
        super();
        this.state = {
          carret: "pd fas fa-angle-up fa-sm"
        }
        this.carretUp = "pd fas fa-angle-up fa-sm";
        this.carretDown = "pd fas fa-angle-down fa-sm";
    }

    toggleCarret(carret, title) {
        if(carret == this.carretUp) {
          this.setState({carret: this.carretDown});
        } else if(carret == this.carretDown) {
          this.setState({carret: this.carretUp});
        }

      this.props.func(title);
    }

    render() {
      return (
        <th className="btn noselect" onClick={() => this.toggleCarret(this.state.carret, this.props.titleHead)}>
          {this.props.titleHead}<i  className={this.state.carret}></i> 
        </th>
      );
    }
  }


  const app = document.getElementById("app");

  ReactDOM.render(<LeaderBoard/>, app);
 });

指向codepen的链接。它非常有效，除非用户点击列标题按最高或最低值排序。

https://codepen.io/dancinoman/pen/VQRWrM

Answer 1

React方法是将回调方法从父级传递给每个子级。然后，子进程调用回调，使父进程更新其状态并触发渲染周期。在渲染周期中，新状态照常传递给孩子们。

从Child到Child调用方法

1 个答案: