如何通過地圖將道具從父母傳遞給孩子

Question

我有一個父組件，該組件使用地圖來渲染帶有某些數據的子組件。 我需要將數據作為道具傳遞給子組件，但是當我傳遞它們時，我無法在子組件中訪問它們。 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訪問子組件中的道具

Answer 1

道具放在 <Name ... > 里面 。 您目前沒有將任何道具傳遞給<ArtCard> ，僅將其文本作為其子代。

Answer 2

您不需要子組件的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>