Question

我知道如何使用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的新手，所以我不知道在组件层次结构中传递内容的最佳解决方案是什么。

Answer 1

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

sendAllergyDelete

Answer 2

好的，我找到了解决方案。

＆＃13;

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

＆＃13;

＆＃13; 我声明变量等于this（component）。所以，在.map中我可以使用that.handleAllergyDelete。

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

2 个答案: