无法将道具从父组件传递给子组件

我需要将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 。 我想可能是我使用$.ajax的success回调里面的props ，然后可能是一些与异步请求相关的东西。 不确定。

我得到的错误是

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

我不确定我在这里做错了什么。 我试图直接在<tbody>之间循环，但仍然没有运气。 此外，我在这里调用函数this.deleteProduct作为参考，但不是通过函数调用。 如果我通过函数调用，那么它报告execjs错误。

我将其作为循环内部React JSX中的JSX ：loop的参考

但没有运气。 请帮忙。

---

你逝去的handleEditProduct={this.editProduct} ，当函数被调用updateProduct在父组件。 将其更改为handleEditProduct={this.updateProduct} ，我敢打赌它的工作原理

编辑：

既然这样做没有用，我看起来有点难，我想我明白了问题所在。 我相当肯定的是_不autobind 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不是你的反应元素。 尽量保持一个参考this你之前map ，明确地绑定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

链接地址: http://www.djcxy.com/p/52149.html

上一篇: Not being able to pass props from a parent component to a child component

下一篇: ES6 + React Component Instance Method