Question

我在React中建立了一个基本的购物篮，我有点受阻。

因此，App拥有整体JSON数据（只是从本地文件中提取），我设想Cart将保持购物车的状态-可能是产品ID的数组。还将使用路线/ cart来显示购物车的内容。

好，所以问题的症结在于我有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来调用函数/实例化购物车的按钮。但是，如何创建此数据流？请注意，购物车没有以任何方式连接到ClothingItem，因此回调函数的作用不大。

有效地，我需要购物车的状态可以全局访问（如果这意味着将其放入App中，就可以了）。

任何帮助，我们将不胜感激。我从代码段中省略了Cart和其他一些代码，因为它们对于该问题而言不完整或不重要。

APP：

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import './main.css'
import './font-awesome.css'
import Header from './components/Header'
import ClothingList from './components/ClothingList'
import Home from './components/Home'
import Footer from './components/Footer'
import Cart from './components/Cart'
import clothesData from './components/json/clothes.data.json'

class App extends Component {

  componentDidMount() {
    this.setState({
      clothesData: clothesData
    })
  }

  render = () => {
    return (
      <Router>
        <div className="App">
          <div className="wrapper"> 
            <Header />
            <main>
              <Route exact path="/" 
                render={() => <Home clothesData={clothesData} />}
              />
              <Route 
                path="/clothes/:item" 
                render={props => <ClothingList {...props} clothesData={clothesData} />}
              />
              <Route 
                path="/cart" 
                component={Cart} 
              />
            </main>
          </div>
          <Footer />
        </div>
      </Router>
    )
  }
}

export default App;

服装清单：

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

Answer 1

您可以创建函数来更改父组件中的状态，并将其作为道具传递给子组件。

Answer 2

如果您希望购物车的状态可全局访问，并且许多需要传递其状态的组件都使用Redux

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

2 个答案: