props 作为 react.js 中父级父级的回调答案

【问题标题】：props as callback to parent of parent in react.jsprops 作为 react.js 中父级父级的回调
【发布时间】：2016-05-24 14:01:57
【问题描述】：

我知道如何使用 props 为父组件设置回调。我在官方反应教程中这样做。但是假设我想将道具传递给父母的父母。假设我有如下组件：

AllergyBox
  AllergiesList
    Allergy

我想实现过敏删除功能。 AllergyBox 拥有过敏列表的状态并将其作为道具传递。每当单击过敏删除按钮时，我都想删除该过敏并刷新 UI。所以我尝试：

var Allergy = React.createClass({
    deleteAllergy: function(e){
        e.preventDefault();
        var allergy_id = this.props.id;
        this.props.onAllergyDelete({
           id: allergy_id
        });
    },
    render: function(){
        return(
            <li>{this.props.name} <a href="#" onClick={this.deleteAllergy}> </a></li>
        )
    }
});

过敏清单是这样的：

var AllergiesList = React.createClass({
    getDefaultProps: function(){
      return {allergies: []}
    },
    sendAllergyDelete: function(id){
      this.props.onSendAllergyDelete({
          id: id
      })
    },
    render:function(){
        var allergies = this.props.allergies.map(function(allergy){
            return(
                <Allergy name={allergy.name} key={allergy.id} id={allergy.id} onAllergyDelete={this.sendAllergyDelete} />
            )
        });
        return(
            <ul>
                {allergies}
            </ul>
        )
    }
});

我有 AllergyBox 组件来处理我的删除操作：

var AllergyBox = React.createClass({

    getInitialState: function(){
      return {
          allergiesList: [],
          form: []
      }
    },
    
    handleAllergyDelete: function(id){
      alert(id);
    },
    render: function(){
        return(
            <div className="allergies">
                <AllergiesList allergies={this.state.allergiesList} onSendAllergyDelete={this.handleAllergyDelete} />
            </div>
        )
    }
});

但我在过敏组件中有错误：

this.props.onAllergyDelete is not a function

我是 React 新手，所以我不知道通过组件层次结构向上传递某些东西的最佳解决方案是什么。

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要在AllergiesList 中为.map 设置this，因为默认情况下.map 中的this 回调指的是全局范围（在浏览器中它是window）或者如果您使用strict mode 这个将是undefined。当您将 this.sendAllergyDelete 作为参数传递时，您不会传递对函数的引用 - 您传递的 window.sendAllergyDelete 等于 undefined，因为在 window 中没有 sendAllergyDelete 函数

var allergies = this.props.allergies.map(function(allergy) {
  return (
    <Allergy 
      name={allergy.name} 
      key={allergy.id} 
      id={allergy.id} 
      onAllergyDelete={this.sendAllergyDelete} />
  )
}, this);
   ^^^^

【讨论】：

【解决方案2】：

好的，我找到了解决办法。

var that = this;
var allergies = this.props.allergies.map(function(allergy){
    return(
         <Allergy onAllergyDelete={that.handleAllergyDelete} name={allergy.name} key={allergy.id} id={allergy.id} />
         )
});

我声明变量等于这个（组件）。所以，在 .map 中我可以使用 that.handleAllergyDelete。

【讨论】：