-1

我一直在寻找一整天，通过从我的产品列表（this.props.products）中选择一个新项目来更新我的 ShoppingCart（this.props.shoppingCart）。

我找到了一种方法，但它似乎真的很麻烦和复杂，那就是使用这样的调度程序：

如果我没记错的话，这也需要 npm-package flex 和 node.js ？这并不理想，因为我使用的是 Visual Studio 和 ReactJS.NET ..

那么......我到底怎么能以容易管理的方式做到这一点？

全球调度员：

var ShoppingCartStore = {
shoppingCart: [],
dispatcher: new Dispatcher(),

addToCart: function (item) {

    this.shoppingCart.push(item);

    this.dispatcher.dispatch({
        actionType: 'updated',
        data: this.shoppingCart
    });
}, 
};

用法 ：

addToCart: function (e) {
    var shoppingCartItem = {
        name: this.props.productData.name,
        price: this.props.productData.price,
        description: this.props.productData.description
    };

    ShoppingCartStore.dispatcher.subscribe(function () {

    });

    ShoppingCartStore.addToCart(shoppingCartItem);
},

如何更新？

var ShoppingCartBig = React.createClass({
componentDidMount: function () {

    ShoppingCartStore.dispatcher.subscribe(function (o) {
        this.setState({ shoppingCart: o.data });
    });
},
4

1 回答 1

2

听起来您正在尝试实现Flux。

假设您不想使用 Flux：

let Store = React.createClass({
  getInitialState () {
    return {
      shoppingCartItems: []
    };
  },

  addItem (item) {
    let newItems = shoppingCartItems.push(item);
    this.setState({shoppingCartItems: newItems});
  },

  render () {
    return (
      <div className='store'>
        <ShoppingCart items={this.state.shoppingCartItems}/>
        <Products addItem={this.addItem} products={this.props.products}/>
      </div>
    )
  }
});

let Products = React.createClass({
  handleClick (product) {
    this.props.addItem(product);
  },

  render () {
    return (
      <div className='products'>
        {this.props.products.map(product => {
          return (
            <div id={product.id} className='product' key={product.id}>
              <h2>{product.name}</h2>
              <img src={product.image}/>
              // I'm pretty sure there are better solutions than using .bind here.
              <button onClick={this.handleClick.bind(this, product)}>Add to Cart</button>
            </div>
          );
        })}
      </div>
    )
  }
});

let ShoppingCart = React.createClass({
  render () {
    return (
      <div className='cart'>
        <ul className='items'>
          {this.props.items.map(item => {
            return (<li className='item' key={item.id}>{item.name}</li>);
          })}
        </ul>
      </div>
    );
  }
});

只要记住将东西作为道具传递下去。在组件层次结构中保持状态尽可能高，并尽可能少地使用它。如果这些组件不能由单个有状态组件包装，您可能需要找到不同的解决方案。

抱歉，我不知道 .NET，所以这是在 JS 中，但这些概念仍然适用！

于 2015-11-20T17:30:27.190 回答