ReactJS.NET - 我如何从另一个组件更新一个组件中的道具？

Question

我一直在寻找一整天，通过从我的产品列表 (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 });
    });
},

Answer 1

听起来您正在尝试实现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 中的，但这些概念仍然适用！