试图从地图()ES6中获取道具并传递给其他组件
问题描述:
我正在与反应ES6合作,并试图通过products.map()获取正确的json对象。我已经尝试了很多不同的东西,但是最终我在同一个地方结束了。试图从地图()ES6中获取道具并传递给其他组件
我需要将价格,标题,颜色和网址传递给组件,以便我可以将它们用作常规道具对象,但是我尝试的所有内容都失败了。我试着用react中的推荐函数来传递对象(return()),但是,我需要遍历产品并为每个实例指定一个标题,价格,颜色和url。
关于我在做什么的错误?
let PRODUCTS = [
{id: 1, price: '$49.99', title: 'Short blue dress', color: 'blue', url:'abc.com'},
{id: 2,price: '$9.99', title: 'Green long dress sleeveless', color: 'blue', url:'abc.com'},
{id: 3,price: '$29.99', title: 'Blue girl dress', color: 'green', url:'abc.com'},
{id: 4,price: '$99.99', title: 'Dress me dirty', color: 'green', url:'abc.com'},
{id: 5,price: '$399.99', title: 'Shirt with short sleeves', color: 'yellow', url:'abc.com'},
{id: 6,price: '$199.99', title: 'Something Something', color: 'yellow', url:'abc.com'}];
class SearchContainer extends Component {
static propTypes = {
location: PropTypes.object,
products: PropTypes.object
}
constructor() {
super();
this.state = {
open: false,
};
}
handleDialog = (status) => {
console.log(status);
this.setState({ open: status });
}
render() {
var products = PRODUCTS
return (
<div className='col-md-12' style={{ margin: '0 auto' }}>
<div className='row searchPageHeader' style={{ padding: '10px', backgroundColor: '#1ABC9C' }}/>
<Footer />
<SideMenu />
<SearchHeader query={this.props.location.query} />
<div className='row' style={{ textAlign: 'center' }}>
<div className='col-md-offset-2 col-md-8 col-md-offset-2'>
{products.map((id, index) =>
<div className='col-md-3' style={{ paddingBottom: '100px' }}>
{console.log(products.id)}
<CircleButton toggleDialog={this.handleDialog} query={this.props.location.query} products={this.props.product} />
</div>
)
}
</div>
</div>
{this.state.open && <Dialog closeOnOverlay={this.handleDialog} />}
</div>
);
}
}
答
我认为你真正想要的是这样的:
<div className='col-md-offset-2 col-md-8 col-md-offset-2'>
{products.map(product => (
<div key={product.id} className='col-md-3' style={{ paddingBottom: '100px' }}>
{console.log(product.id)}
<CircleButton
toggleDialog={this.handleDialog}
query={this.props.location.query}
products={product}
/>
</div>
))}
</div>
,或者简化为:
render() {
const renderProduct = product => (
<div key={product.id} className='col-md-3' style={{ paddingBottom: '100px' }}>
{console.log(product.id)}
<CircleButton
toggleDialog={this.handleDialog}
query={this.props.location.query}
products={product}
/>
</div>
);
...
然后
<div className='col-md-offset-2 col-md-8 col-md-offset-2'>
{products.map(renderProduct)}
</div>
亮点:
-
map
函数中的第一个参数是product
。不是id
。 - 你没有使用
map
函数的参数都 - 你需要一个
key
识别map
生成的组件。 - 您将
this.props.products
传递给子组件,这是完全不同的。
+0
这就是正是我所需要的,非常感谢!然而,我如何在我的CircleButton中调用这些道具?我有产品:PropTypes.object设置并试图使用{console.log(props.price)} 编辑:我明白了,我忘了props.product.price!谢谢! – Sjohansen
你的意思是'products.map((products,index)=> ...'和'console.log(product.id)'并且传递'product'做了'CircleButton'?真的很难 – Sulthan
我试图将价格,标题,颜色和网址传递给我的组件。我的{console.log(products.id)}只是给了我一个“undefined” –
Sjohansen