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

How to handle a case like calling a method in Component A from method in component B in ReactJS

本文关键字：组件 方法 调用 情况 何处理 处理 ReactJS      更新时间：2023-09-26

我需要将课程标签表单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>
      )
  }
})

您可以使用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，而不是直接调用组件的方法。

相关文章：