扩展运算符将所有其他道具传递给组件。 反应.js

Question

I'm having trouble understanding the spread operator when I want to pass all other props to a component.

Any help would be appreciated.

import React, { Fragment } from "react";
import SiteCard from "./SiteCard";

const SiteList = ({ sites }) => {
  return (
    <Fragment>
      {sites.map((site) => {
        return (
          <SiteCard
            key={site.login.uuid}
            image={site.picture.large}
            firstName={site.name.first}
            lastName={site.name.last}
            city={site.location.city}
            country={site.location.country}
            sensors={site.dob.age}
            otherSiteProps={...site} // how can I pass the site props here?
          />
        );
      })}
    </Fragment>
  );
};

export default SiteList;

Answer 1

You are almost there with the solution.

You need to pass it as otherSiteProps={{...site}} . This is if you want to pass site as an object to otherSiteProps property of SiteCard .

If you want to spread site and have multiple props for component SiteCard you do it like this:

<SiteCard
  key={site.login.uuid}
  image={site.picture.large}
  firstName={site.name.first}
  lastName={site.name.last}
  city={site.location.city}
  country={site.location.country}
  sensors={site.dob.age}
  {...sites}
/>

This in case that sites is an object. If site is an array, this wont work.

Answer 2

You just need to write:

<SiteCard
  key={site.login.uuid}
  image={site.picture.large}
  firstName={site.name.first}
  lastName={site.name.last}
  city={site.location.city}
  country={site.location.country}
  sensors={site.dob.age}
  {...site} // how can I pass the site props here?
/>

But wait, why you're making so complicated? You can just use:

<SiteCard {...site} />

Now, in your SiteCard component use required props.

And if I were you, I would not have separated SiteCard component for this scenario. I would just write:

{sites.map((site) => {
  return (
    // everything here I will utilize in html.
  );
})}