无法将道具从父组件传递给子组件
我需要将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
上一篇: Not being able to pass props from a parent component to a child component