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

Question

我需要将类(class)标签表单 Component #1 传递到 Component #2。我尝试通过调用另一个组件中的方法来实现此目的。但它失败了发生引用错误。如何实现这一目标？

组件#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>
      )
  }
})

Answer 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 而不是直接调用组件的方法。