如何处理 ReactJS 中从组件 B 中的方法调用组件 A 中的方法的情况答案

【问题标题】：How to handle a case like calling a method in Component A from method in component B in ReactJS如何处理 ReactJS 中从组件 B 中的方法调用组件 A 中的方法的情况
【发布时间】：2016-01-11 10:27:59
【问题描述】：

我需要将课程标签表单Component #1 传递给Component #2。我试图通过调用另一个组件中的方法来实现这一点。但是它没有说Reference Error occurred。如何做到这一点？

组件#1：

var CourseCard = React.createClass({
  showPapers: function(){
    console.log("Clicked:" + this.props.each_course.label);
    setCourseName(this.props.each_course.label);
    var elem = React.createElement(Papers, {
      course : this.props.each_course.label
    });
  },

  render: function() {
    return(
      <Link to="/papers">
        <div className="course_card" onClick={this.showPapers}>
          <img className="course_img" src={this.props.each_course.image}/>
          <h4>{this.props.each_course.label}</h4>
        </div>
      </Link>
      );
  }
});

组件 #2：

const Papers = React.createClass({
  setCourseName: function(course_name){
    console.log("Called setCourseName with name" + course_name);
  },
  render () {
    return (
        <h1>List of all papers</h1>
      )
  }
})

【问题讨论】：

组件 #2 看起来像是在不同的页面上。我会在Link 组件中传递一个查询字符串。
我们如何用Link传递参数？
使用这种方式我们无法获取标签的值。它在url中显示{this.props.label}。还有没有其他方法可以再次从URL获取值
stackoverflow.com/questions/28080102/… 这可能会有所帮助。

标签： javascript reactjs react-router

【解决方案1】：

您可以使用refs 调用另一个组件的方法。

组件 #1

var CourseCard = React.createClass({
  showPapers(){
    console.log("Clicked:" + this.props.each_course.label);
    this.refs.papers.setCourseName(this.props.each_course.label);
  },    
  render() {
    return(
      <Link to="/papers">
        <div className="course_card" onClick={this.showPapers}>
          <img className="course_img" src={this.props.each_course.image}/>
          <h4>{this.props.each_course.label}</h4>
        </div>
      </Link>
      <Papers refs="papers"/>
    );
  }
});

组件 #2

const Papers = React.createClass({
  setCourseName(course_name){
    console.log("Called setCourseName with name" + course_name);
  },
  render () {
    return <h1>List of all papers</h1>;
  }
})

但尽量避免使用props，而不是直接调用组件的方法。

【讨论】：