我有一个父组件,该组件使用地图来渲染具有某些数据的子组件。我需要将数据作为道具传递给子组件,但是当我传递它们时,我无法在子组件中访问它们。 this.props.children prop具有我需要的props,但是有更好的方法将它们传递给child组件吗?
父组件
class Home extends Component {
renderArtCards = (artCardArray) => {
return (artCardArray.map((artCard, index) => {
return (
<div key={index}>
<ArtCard>
title={artCard.title}
image={artCard.image}
description={artCard.description}
price={artCard.price}
</ArtCard>
</div>
)
})
)
}
render() {
return (
<Fragment>
<div className="row no-gutters justify-content-end pageTitleRow">
<div className="pageTitle">Home</div>
</div>
<div className="artCardsRow">
<Masonry
className={'masonryStyle'}
options={masonryOptions}>
{this.renderArtCards(artCards)}
</Masonry>
</div>
</Fragment>
)
}
}
子组件
class ArtCard extends Component {
render() {
console.log(this.props.children)
return (
<Fragment>
<Card className="artCardBody">
<CardMedia
className="artCardMedia"
image={this.props.image}
title={this.props.title}
/>
<CardContent>
<div className="row artCardTitleRow">
<div className="artCardTitle">{this.props.title}</div>
<div className="artCardPrice">Rs.{this.props.price}</div>
</div>
<div className="text-muted">{this.props.description}</div>
</CardContent>
</Card>
</Fragment>
)
}
}
我需要使用this.props.xxxx访问子组件中的道具
答案 0 :(得分:3)
道具进入http
内部。您目前没有向<Name ... >
传递任何道具,而只是将文本作为其子元素。
答案 1 :(得分:0)
您的子组件不需要class
,所以请这样做(哑组件):
const ArtCard = ({ image, title, price, description }) => (
return (
<Fragment>
<Card className="artCardBody">
<CardMedia
className="artCardMedia"
image={image}
title={title}
/>
<CardContent>
<div className="row artCardTitleRow">
<div className="artCardTitle">{title}</div>
<div className="artCardPrice">Rs.{price}</div>
</div>
<div className="text-muted">{description}</div>
</CardContent>
</Card>
</Fragment>
)
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>