我如何将一个变量传递给多层组件?例如 传递到productCard页面,然后传递到products页面显示所有的卡片。

问题描述 投票:0回答:1

我是一个初学者。我一直在做小的迭代,以使我的网页更动态,用更少的组件。我有一个映射变量,在app.js页面的本地硬编码状态中循环。它的主要目标是为每个产品创建多个卡片。在创建这个卡片后,我想获得对这个变量的访问权,并将其显示在一个名为 "产品 "的页面上。我如何将这个 "设备 "变量传递到 "产品 "页面。我想在该页面上显示所有的卡片。

  const equipment = (
    <div>
      {this.state.equipment.map( (item, index) => {
        return <ProductCard
          name={item.name}
          description={item.description}
          price={item.price}
          review={item.review}
          image={item.image}
          key={item.id}/>
        })}
      </div>
    )

换句话说,有没有办法获取这个位于app.js页面的变量的访问权限,并将其显示在Products.js页面上。测试时,卡片在app.js页面上已经显示得很好了。

以前,我只会在无状态组件中使用钩子渲染状态,但这意味着我必须在每个页面上创建json文件或硬编码对象。例如,如果我有一个'socks'页面,那么对象的数组就会在这个页面上,如果我有一个tshirts页面,所有的对象都会在tshirts.js页面上等等,然后我会创建一个map函数来循环。

编辑**

    <Router>
      <Navbar/>
      <SubNavbar/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/products" component={Products}/>
        <Route exact path="/contact" component={Contact}/>
        <Route exact path="/about" component={About}/>
        <Route exact path="/equipment" render={ (props) => <Equipment equipment2={equipment}/>}/>
      </Switch>
  </Router>  
javascript reactjs
1个回答
0
投票

假设用户在产品页面选择了自己的产品类别,你可以这样做。

<Router>
    <Navbar />
    <SubNavbar />
    <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/products" render={(props) => <Products onSelect={(category) => /* setState({ category })} />} />
        <Route exact path="/contact" component={Contact} />
        <Route exact path="/about" component={About} />
        <Route exact path="/categories" render={(props) => <ProductList items={/* state.category.items */} />} />
    </Switch>
</Router>  

0
投票
RESOLVED::

//create product cards or free weights
    const freeWeights = (
      <div className="all-cards">
        {this.state.freeWeights.map( (item, index) => {
          return <ProductCard
            name={item.name}
            description={item.description}
            price={item.price}
            review={item.review}
            image={item.image}
            key={item.id}
            id={item.id}/>
          })}
        </div>
      )

      //create productcards for equipment
      const equipment = (
        <div className="all-cards">
          {this.state.equipment.map( (item, index) => {
            return <ProductCard
              name={item.name}
              description={item.description}
              price={item.price}
              review={item.review}
              image={item.image}
              key={item.id}
              id={item.id}/>
            })}
          </div>
        )

        //create productcards for barbells
        const barbells = (
          <div className="all-cards">
              {this.state.barbells.map( (item, index) => {
                return <ProductCard
                  name={item.name}
                  description={item.description}
                  price={item.price}
                  review={item.review}
                  image={item.image}
                  key={item.id}
                  id={item.id}/>
                })}
            </div>
          )

        //create productcards for barbells
        const plates = (
          <div className="all-cards">
              {this.state.plates.map( (item, index) => {
                return <ProductCard
                  name={item.name}
                  description={item.description}
                  price={item.price}
                  review={item.review}
                  image={item.image}
                  key={item.id}
                  id={item.id}/>
                })}
            </div>
          )

          const shoes = (
            <div className="all-cards">
                {this.state.shoes.map( (item, index) => {
                  return <ProductCard
                    name={item.name}
                    description={item.description}
                    price={item.price}
                    review={item.review}
                    image={item.image}
                    key={item.id}
                    id={item.id}/>
                  })}
              </div>
            )


The <Router> on app.js: 

 <Router>
          <Navbar/>
          <SubNavbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/contact" component={Contact}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/equipment" render={ (props) => <ProductListings {...props} equipmentCards={equipment} />}/>
            <Route exact path="/barbells" render={ (props) => <ProductListings {...props} barbellCards={barbells} />}/>
            <Route exact path="/plates" render={ (props) => <ProductListings {...props} plateCards={plates} />}/>
            <Route exact path="/shoes" render={ (props) => <ProductListings {...props} shoeCards={shoes} />}/>
            <Route exact path="/products" render={ (props) => <ProductListings {...props} plateCards={plates} equipmentCards={equipment} barbellCards={barbells} />}/>

          </Switch>
      </Router>  


Then on the ProductListings.js page (page to display all cards):

export default function ProductListings(passedCards, props) {

    return(
        <div className="main-container">
        <Spring
            from={{ opacity: 0, marginRight: -800}}
            to={{ opacity: 1, marginRight: 0}}

        >
            { props => (
                <div className="products-wrapper" style={props} >
                    <div className="sidebar">
                        <Filter/>
                    </div>
                    <div className="products-listings">
                        {passedCards.equipmentCards}
                        {passedCards.barbellCards}
                        {passedCards.plateCards}
                        {passedCards.shoeCards}
                    </div>
                </div>
            )}
        </Spring>
    </div> 
© www.soinside.com 2019 - 2024. All rights reserved.