Javascript 无法在react js中使用PubSub.publish传递数据
无法使用pubsub组件将数据从产品组件传递到Cartlist组件。我需要将list对象传递到Cart组件。产品组件呈现产品列表。因此,单击时,每个项目都必须作为道具传递到Cart组件Javascript 无法在react js中使用PubSub.publish传递数据,javascript,reactjs,react-native,Javascript,Reactjs,React Native,无法使用pubsub组件将数据从产品组件传递到Cartlist组件。我需要将list对象传递到Cart组件。产品组件呈现产品列表。因此,单击时,每个项目都必须作为道具传递到Cart组件 import React from 'react'; import PubSub from 'pubsub-js'; import Productlist from '../component/productlist'; import Addtocart from '../component/addtocart'
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;
从“React”导入React;
从“PubSub js”导入PubSub;
从“../component/Productlist”导入Productlist;
从“../component/Addtocart”导入Addtocart;
var createReactClass=require('create-react-class');
var Product=createReactClass({
addtocart:函数(数据){
控制台日志(数据);
publish('add-cart','helloworld')
},
render:function(){
var list=this.props.dataname;
返回(
{list.price}{list.currency}
{list.name}
从您的沙箱中,我可以看到问题,并在下面的工作演示中修复了您的所有问题
在addtocart.js的某些地方,您使用了class而不是className
您将“我的主题”作为订阅,但发布名称不同
您从未创建购物车组件
我将假设1和2是您创建的演示中的错误,而不是原始应用程序中的错误。我相信3才是真正的罪魁祸首。如果您从未在任何地方创建组件,装载事件将不会触发,其任何其他代码也不会触发。我已将其添加到您的app.js中(尽管您可以自己决定购物车的业务逻辑和位置)。我想知道您是否应该将addtocart和cart组件合并为一个组件,并将addtocart作为cart的一个功能?Pubsub在React 16中工作-我自己也在使用它。能否请您在github或类似工具中创建一个工作演示项目?如果看不到问题,我们将无法提供帮助。这可能是您的捆绑/编译管道的问题@damanptyltd我有一个演示,我需要通过pubsub.publish在单击Cartlist组件时传递数据。
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;