反应：不能调用子组件内的函数 [英] React: Cant call a function inside child component

问题描述

 <$> 
 
 c $ c> Uncaught TypeError：this.refs.todayKpi.loadTodaysKpi不是函数
  

父组件：

  class KpisHeader extends React.Component {
 
 constructor（）{
 super（） ; 
 this.onUpdate = this.onUpdate.bind（this）; 
} 
 render（）{
 return< div> 
< DateRange ref =dateRangeonUpdate = {this.onUpdate} /> 
< TodayKpi ref =todayKpi{... this.state} /> 
< / div>; 
 
 
 onUpdate（val）{
 
 this.setState（{
 startDate：val.startDate，
 endDate：val.endDate 
}，function（）{
 this.refs.todayKpi.loadTodaysKpi（）; 
}）; 
 
 
 
 
 $ b我想通过函数从DateRange组件获取一些数据onUpdate，然后我想要在从服务器获取数据的TodayKpi中触发一个函数。现在它只是console.log（AAA）;。
 
 
子组件： 
 
 
  class TodayKpi extends React.Component {
 constructor（）{
 super（）; 
 this.loadTodaysKpi = this.loadTodaysKpi.bind（this）; 
 
 
 render（）{
 console.log（this.props.startDate ++ this.props.endDate）; 
 return< div className =today-kpi> 
 
 
< / div>; 
 
 loadTodaysKpi（）{
 console.log（AAAA）; 
 
 
  
我应该如何实现它？
解决方案
由于我还没有掌握的原因，React不鼓励父母调用子方法。然而，他们松了口气，给了我们一个逃生舱，这就是允许的。你认为'Refs'是逃生舱的一部分是正确的。如果像我一样，你已经阅读了数十篇文章来搜索这些信息，你就会准备好了解他们的逃生舱口的描述 
 
 
 
在你的情况中，你可能想在你的KpisHeader类中尝试类似的东西。
 
 
 
更改此行
 < TodayKpi ref =todayKpi{。 ..this.state} /> 
  
使用ref回调函数，如下所示：
 < TodayKpi ref = {（todayKpiComponent）=> this.todayKpiComponent = todayKpiComponent} {... this.state} /> 
  
或者ES6之前的版本： 
 
 
 < TodayKpi 
 ref = 
 {
 function（todayKpiComponent）
 {
 this.todayKpiComponent = todayKpiComponent 
} 
} 
 {... this.state} 
 /> 
  
然后您将能够像KpisHeader类一样访问您的todayKpi组件方法：
  this.todayKpiComponent.someMethod（）; 
  
奇怪的是，对于我来说，在ref回调函数中，'this'是窗口而不是父窗口零件。所以，我不得不添加
  var self = this; 
  
在render方法之上并在ref回调函数中使用'self'。
 
 
 
在我的情况下，我有一个未知数量的动态生成的子组件，所以我将每个组件放入一个数组中。我清除了componentWillUpdate中的数组。这一切似乎都在起作用，但我有一种不安的感觉，尤其是考虑到React对调用儿童方法的厌恶。
 
I am trying to call a function inside child component through this.refs but i keep getting error that this function doesn't exist.
Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function
Parent component: 
class KpisHeader extends React.Component {

  constructor() {
    super();
    this.onUpdate = this.onUpdate.bind(this);
  }
    render(){
        return <div>
            <DateRange ref="dateRange" onUpdate={this.onUpdate}/>
            <TodayKpi ref="todayKpi" {...this.state}/>
          </div>;
    }

  onUpdate(val){

      this.setState({
          startDate: val.startDate,
          endDate: val.endDate
      }, function(){
        this.refs.todayKpi.loadTodaysKpi();
      });
  } 
 }
I want to get some data from DateRange component through function onUpdate, and then I want to trigger a function inside TodayKpi which fetches data from the server. For now it is just console.log("AAA");.

Child component:
class TodayKpi extends React.Component {
    constructor() {
        super();
        this.loadTodaysKpi = this.loadTodaysKpi.bind(this);
    }

    render(){
        console.log(this.props.startDate + " "+ this.props.endDate);
        return <div className="today-kpi">


          </div>;
    }
    loadTodaysKpi(){
        console.log("AAAA");
    }
}
How should I implement this?
解决方案
For reasons I don’t yet grasp, React discourages calling child methods from the parent.  However, they relent and give us an ‘escape hatch’ which allows just that.  You were correct in thinking that ‘Refs’ were a part of that escape hatch.  If, like me, you have read dozens of articles searching for this information, you will be well prepared to understand their description of the escape hatch

In your case, you may want to try something like this in your KpisHeader class.

Change this line
<TodayKpi ref="todayKpi" {...this.state}/>
to use a ref callback function something like this:
<TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/>
or, pre-ES6, this:
<TodayKpi 
    ref= 
    {
        function (todayKpiComponent)
        {
            this.todayKpiComponent = todayKpiComponent      
        }
    }
    {...this.state}
 />
Then you will be able to access your todayKpi component methods from your KpisHeader class like this:
this.todayKpiComponent.someMethod();
Oddly, for me, inside the ref callback function, ‘this’ was the window rather than the parent component.  So, I had to add
var self = this;
above the render method and use ‘self’ inside the ref callback function.

In my case I had an unknown number of dynamically generated children components, so I put each one into an array.  I cleared the array in componentWillUpdate.  It all seems to be working but I have an uneasy feeling especially given React’s distaste for calling children’s methods.

                        
这篇关于反应：不能调用子组件内的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！