无法使用pubsub组件从Product组件传递数据到Cartlist组件。我需要将列表对象传递给Cart组件。产品组件呈现产品列表。因此每个项目都必须作为道具传递给点击购物车组件。
import React from 'react';
import PubSub from 'pubsub-js';
import Productlist from '../component/productlist';
import Addtocart from '../component/addtocart';
var createReactClass = require('create-react-class');
var Product = createReactClass({
addtocart:function(data){
console.log(data);
PubSub.publish('add-cart','helloworld')
},
render:function(){
var list = this.props.dataname;
return(
<div className="card hoverable">
<div className="card-image">
<img src={list.image} alt={list.name} className='shop-img' />
</div>
<div className="card-content">
<span className="card-title blue-text text-darken-2">{list.price} {list.currency}</span>
<p>{list.name}</p>
</div>
<Addtocart onClick={() => this.addtocart(list)} />
</div>
)
}
})
export default Product;
购物清单组件
import React from 'react';
import PubSub from 'pubsub-js';
var createReactClass = require('create-react-class');
var Cartlist = createReactClass({
componentWillMount:function(data){
PubSub.subscribe('add-cart',function(data){
console.log(data);
});
},
// addtocart:function(data){
// console.log(data);
// },
render:function(){
var list = this.props.dataname;
return(
<div className="card hoverable">
</div>
)
}
})
export default Product;
的演示链接
答案 0 :(得分:1)
在您的沙盒中,我可以看到问题,并在以下工作演示中解决了所有问题https://codesandbox.io/s/2nv93ro4n
我将假设1和2是您在创建的演示中犯的错误,而不是原始应用程序中的错误。我相信3是真正的罪魁祸首。如果您从未在任何地方创建组件,则mount事件将永远不会触发,也不会触发任何其他代码。我已将它添加到您的app.js中(尽管您可以自己决定购物车的业务逻辑和位置)。我想知道你是否应该将addtocart和cart组件合二为一,并将addToCart作为购物车的功能?