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。我想可能是我在props的{{1}}回调中使用success，然后可能是与异步请求有关的事情。不确定。

我得到的错误是

$.ajax

我不确定我在这里做错了什么。我试图在Uncaught TypeError: _this.props.handleEditProduct is not a function之间直接循环，但仍然没有运气。此外，我在调用像<tbody>这样的函数作为参考，但不是通过函数调用。如果按功能调用，则报告this.deleteProduct错误。

我将此作为在execjs内部循环的参考：loop inside React JSX

但没有运气。请帮忙。

Answer 1

在父组件中调用函数handleEditProduct={this.editProduct}时，您正在传递updateProduct。将其更改为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未设置为您的反应元素。尝试在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

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

1 个答案: