Reactjs 从子组件中的事件触发状态更改

我正在用React做一个基本的购物篮，我有点卡住了

所以，应用程序保存了刚刚从本地文件中提取的全部JSON数据，我设想Cart将维护Cart的状态——可能是一个产品ID数组。它还将用于使用路线/购物车显示购物车的内容

好的，问题的关键是我有ClothingList组件，它通过将“ClothingItem”组件推送到数组来构建项。在这个组件ClothingItem中，是无处不在的产品显示和“添加到购物车”按钮：

<div className="items__item">
 <h3>{props.item.name} - {props.item.brand}</h3>
 <div className="item__price">
    &pound;{props.item.price}
 </div>
 <div className="item__photo">
   <img src={process.env.PUBLIC_URL + '/product-imgs/' + props.item.photo} alt="" />
 </div>
 <div className="item__buttons">
   <button>Add to cart</button>
 </div>
</div>

现在，我需要这个按钮来调用函数/实例化购物车，可能是通过传递产品ID。但是我如何创建这个数据流呢？请注意，Cart并没有以任何方式连接到ClothingItem，所以回调函数并没有多大用处

实际上，我需要购物车的状态是全球可访问的，如果这意味着把它放在应用程序中，那就这样吧

非常感谢您的帮助。我从代码片段中省略了Cart和其他一些内容，因为它们要么不完整，要么对问题不重要

应用程序：

服装清单：

import React from 'react'
import ClothingItem from './ClothingItem'
import ClothingNav from './ClothingNav'

const ClothingList = props => {
  const getQuery = () => {
    let queryJSON
    let displayItems

    if ( props.displayItems ){
      displayItems = props.displayItems
    } else {
      displayItems = props.match.params.item   
    }

    switch ( displayItems ) {
      case 'tshirts':
        queryJSON = props.clothesData.tshirts
        break
      case 'jumpers':
        queryJSON = props.clothesData.jumpers
        break
      case 'trousers':
        queryJSON = props.clothesData.trousers
        break
      case 'jackets':
        queryJSON = props.clothesData.jackets
        break
      case 'suits':
        queryJSON = props.clothesData.suits
        break
      default: 
        queryJSON = props.clothesData.tshirts
        break
    }

    return queryJSON
  }

  const getItems = () => {
    let items = []
    let queryJSON = getQuery()

    for ( let i = 0; i < queryJSON.length; i++ ) {
      items.push(
        <ClothingItem 
          key={i} 
          item={queryJSON[i]}
        />
      )
    }
    return items
  }

  return (
    <div>
      <div className="grid-container">
        <ClothingNav />
        <div className="heading">
          <h2>{props.displayItems}</h2>
        </div>
        <div className="items">
          {getItems()}
        </div>
      </div>
    </div>
  )
}

export default ClothingList

衣物：

import React from 'react'

const ClothingItem = props => {
  return (
    <div className="items__item">
      <h3>{props.item.name} - {props.item.brand}</h3>
      <div className="item__price">
        &pound;{props.item.price}
      </div>
      <div className="item__photo">
        <img src={process.env.PUBLIC_URL + '/product-imgs/' + props.item.photo} alt="" />
      </div>
      <div className="item__buttons">
        <button>Add to cart</button>
      </div>
    </div>
  )
}

export default ClothingItem

---

如果您希望购物车的状态是全局可访问的，并且许多需要传递其状态的组件使用Redux，您可以创建函数来更改父组件中的状态，并将其作为道具传递给子组件

import React from 'react'

const ClothingItem = props => {
  return (
    <div className="items__item">
      <h3>{props.item.name} - {props.item.brand}</h3>
      <div className="item__price">
        &pound;{props.item.price}
      </div>
      <div className="item__photo">
        <img src={process.env.PUBLIC_URL + '/product-imgs/' + props.item.photo} alt="" />
      </div>
      <div className="item__buttons">
        <button>Add to cart</button>
      </div>
    </div>
  )
}

export default ClothingItem