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

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

我得到的错误是

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

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

我以此作为在JSX中循环的参考：loop inside React JSX

但运气不好。请帮忙。

Answer 1

您正在传递 handleEditProduct={this.editProduct}，而该函数在您的父组件中被调用 updateProduct。将其更改为 handleEditProduct={this.updateProduct} 我敢打赌它会起作用

编辑：

因为那没有用，我仔细看了看，我想我明白了问题所在。我相当确定 _ 不会像 React.createClass 那样自动绑定 this。因此，当您在此处映射您的产品时：

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 未设置为您的 React 元素。尝试在 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

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

Not being able to pass props from a parent component to a child component

ruby-on-rails

reactjs

react-jsx