Javascript 如何处理从ReactJS中组件B中的方法调用组件a中的方法这样的情况

我需要将课程标签表单

组件1

传递到

组件2

。我试图通过调用另一个组件中的方法来实现这一点。但它没有说发生了

引用错误

。如何做到这一点

第1部分：

var CourseCard=React.createClass({
演示文稿：函数（）{
console.log（“点击：+这个.道具.每个课程.标签”）；
setCourseName（此.props.each_course.label）；
var elem=React.createElement（文件{
课程：此.props.each_course.label
});
},
render:function（）{
返回(
{this.props.each_course.label}
);
}
});

第2部分：

const Papers=React.createClass({
setCourseName:函数（课程名称）{
console.log（“名为“+课程名称”的setCourseName）；
},
渲染（）{
返回(
所有文件清单
)
}
})

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

组成部分#1

var CourseCard=React.createClass({
展览文件（）{
console.log（“点击：+这个.道具.每个课程.标签”）；
this.refs.papers.setCourseName（this.props.each_course.label）；
},    
render（）{
返回(
{this.props.each_course.label}
);
}
});

组成部分#2

const Papers=React.createClass({
setCourseName（课程名称）{
console.log（“名为“+课程名称”的setCourseName）；
},
渲染（）{
所有文件的归还清单；
}
})

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

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

组成部分#1

var CourseCard=React.createClass({
展览文件（）{
console.log（“点击：+这个.道具.每个课程.标签”）；
this.refs.papers.setCourseName（this.props.each_course.label）；
},    
render（）{
返回(
{this.props.each_course.label}
);
}
});

组成部分#2

const Papers=React.createClass({
setCourseName（课程名称）{
console.log（“名为“+课程名称”的setCourseName）；
},
渲染（）{
所有文件的归还清单；
}
})

---

但是尽可能避免它，并使用道具，而不是直接调用组件的方法。

component#2似乎位于不同的页面上。我将在

链接

组件中传递一个查询字符串。我们如何通过

链接

传递参数？使用这种方式我们无法获取标签的值。它在url中显示{this.props.label}。是否有其他方法不从url中再次获取值？这可能会有所帮助。组件#2看起来位于不同的页面上。我将在

链接

组件中传递一个查询字符串。我们如何通过

链接

传递参数？使用这种方式我们无法获取标签的值。它在url中显示{this.props.label}。是否有其他方法不从url中再次获取值这可能会有所帮助。

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>
      );
  }
});

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

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"/>
    );
  }
});

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