不能将道具从父组件传递给子组件

Question

我需要将props传递给子组件Product但我不知道我在这里错过了什么。

父组件：

var Products = React.createClass({ 
    getInitialState: function(){..}, 
    deleteProduct: function(){..}, 
    updateProduct: function(){..}, 
    render: function(){ 
    var products = _.map(this.state.products, function(product){ 
     return(
     <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/> 
    ) 
    }); 
    return (
    <table> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Quantity</th> 
      <th>Price</th> 
      <th colSpan="4">Actions</th> 
     </tr> 
     </thead> 
     <tbody> 
     {products} 
     </tbody> 
    </table> 
) 
} 
}); 

子组件：

var Product = React.createClass({ 
console.log(this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined 
handleEdit: function() { 
    e.preventDefault(); 
    data = {..}; 
    $.ajax({ 
    .., 
    success: (function(_this) { 
     console.log(_this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined 
     return function(data) { 
     _this.setState({ 
      edit: false 
     }); 
     return _this.props.handleEditProduct(_this.props.product, data); 
     }; 
    })(this) 
    }); 
} 
}); 

我能使用key和product作为组件内的道具，但不this.props.handleDeleteProduct和this.props.handleEditProduct。 我想可能是我在success回调$.ajax内使用props，然后可能会有一些东西与异步请求相关。不确定。

我得到的错误是

Uncaught TypeError: _this.props.handleEditProduct is not a function 

我不知道我在做什么错在这里。我试图直接在<tbody>之间循环，但仍然没有运气。 在这里我打电话的功能，如this.deleteProduct作为参考，但不是通过函数调用。如果我通过函数调用，那么它报告execjs错误。

我把这个作为参考的内部JSX循环：loop inside React JSX

，但没有运气。请帮忙。

Answer 1

当您的父组件中的函数名为updateProduct时，您正在通过handleEditProduct={this.editProduct}。将其更改为handleEditProduct={this.updateProduct}，我敢打赌，它的工作原理

编辑：

由于没有工作，我看着有点困难，我想我看到的问题是什么。我很确定_不会自动绑定this就像React.createClass一样。因此，当你在映射您的产品在这里：

var products = _.map(this.state.products, function(product){ 
     return(
     <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/> 
    ) 
    }); 

this未设置为你的反应元。尝试在map之前保留对this的引用，明确地将this绑定到您的地图功能，或使用ES6箭头功能：https://babeljs.io/docs/learn-es2015/#arrows-and-lexical-this。最简单的方式来实现你想要的是保存在this一个变量：

var self = this; 
var products = _.map(this.state.products, function(product){ 
      return(
      <Product key={product.id} product={product} handleDeleteProduct={self.deleteProduct} handleEditProduct={self.editProduct} formData={self.props.formData}/> 
     ) 
     }); 

您还可以使用bind来达到同样的效果：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind