如何使用地图将道具从父母传递给孩子答案

【问题标题】：How to pass props to child from parent with a map如何使用地图将道具从父母传递给孩子
【发布时间】：2026-01-28 09:05:02
【问题描述】：

我有一个父组件，它使用地图来渲染带有一些数据的子组件。我需要将数据作为道具传递给子组件，但是当我传递它们时，我无法在子组件中访问它们。 this.props.children 道具有我需要的道具，但有没有更好的方法将它们传递给子组件？

父组件

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 访问子组件中的 props

【问题讨论】：

标题、图片、描述、价格应在起始标签 ArtCard 内

标签： javascript reactjs jsx react-props

【解决方案1】：

道具进入内部<Name ... >。您目前没有向<ArtCard> 传递任何道具，只是将文本作为其子项。

【讨论】：

这行得通。我应该检查一下。非常感谢
this.props.children 不存在

【解决方案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>

【讨论】：