我是一个初学者。我一直在做小的迭代,以使我的网页更动态,用更少的组件。我有一个映射变量,在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>
假设用户在产品页面选择了自己的产品类别,你可以这样做。
<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>
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>