React - 如何將組件和道具傳遞給子組件並使該組件使用該道具

Question

這是使用react-slick的 Slick Carousel。

[![在此處輸入圖像描述][1]][1]

應用程序.js

import "./styles.css";

import SlickCarousel from "./SlickCarousel";
import ComponentA from "./ComponentA";

export default function App() {
  const itemsA = [
    {
      id: 1,
      title: "Name 1",
      description: "Des 1"
    },
    {
      id: 2,
      title: "Name 2",
      description: "Des 2"
    }
  ];

  const slickCarouselSettings = {
    infinite: false,
    speed: 500,
    dots: true,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 3
  };
  return (
    <div className="App">
      <SlickCarousel
        items={itemsA}
        settings={slickCarouselSettings}
        ItemComponent={ComponentA}
      />
    </div>
  );
}

SlickCarousel.jsx

import React from "react";
import Slider from "react-slick";

function SlickCarouselDefault(props) {
  const { items, settings, ItemComponent } = props;
  return (
    <div>
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              <ItemComponent
                title={item.title}
                description={item.description}
              />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default SlickCarouselDefault;

組件A.jsx

import React from "react";

function ComponentA(props) {
  const { title, description } = props;
  return (
    <div className="nft-item">
      <h2>This is Component A</h2>
      <div style={{ marginTop: "24px" }} />
      <div className="title">{title}</div>
      <div style={{ marginTop: "12px" }} />
      <div className="description">{description}</div>
    </div>
  );
}

export default ComponentA;

它工作正常，但我希望SlickCarousel.jsx可重用。
所以我添加了需要不同道具的ComponentB.jsx

組件B.jsx

import React from "react";

function ComponentB(props) {
  const { imgSrc, name } = props;
  return (
    <div>
      <h2>This is Component B</h2>
      <div style={{ marginTop: "10px" }} />
      <div className="title">{name}</div>
      <div style={{ marginTop: "20px" }} />
      <img src={imgSrc} alt={name} />
    </div>
  );
}

export default ComponentB;

並嘗試將其用於SlickCarousel.jsx 。

應用程序.jsx

import "./styles.css";

import SlickCarousel from "./SlickCarousel";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const itemsA = [
    {
      id: 1,
      title: "Name 1",
      description: "Des 1"
    },
    {
      id: 2,
      title: "Name 2",
      description: "Des 2"
    }
  ];

  const slickCarouselSettings = {
    infinite: false,
    speed: 500,
    dots: true,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 3
  };

  const itemsB = [
    {
      id: 1,
      name: "Name 1",
      imgSrc: "imgSrc 1"
    },
    {
      id: 2,
      name: "Name 2",
      imgSrc: "imgSrc 2"
    }
  ];

  const slickCarouselSettingsB = {
    infinite: true,
    speed: 200,
    dots: true,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <div className="App">
      <SlickCarousel
        items={itemsA}
        settings={slickCarouselSettings}
        ItemComponent={ComponentA}
      />
      <SlickCarousel
        items={itemsB}
        settings={slickCarouselSettingsB}
        ItemComponent={ComponentB}
      />
    </div>
  );
}

由於在SlickCarousel.jsx中，我對ItemComponent的道具進行了硬編碼，我想知道如何使其可重用。

SlickCarousel.jsx

import React from "react";
import Slider from "react-slick";

function SlickCarouselDefault(props) {
  const { items, settings, ItemComponent } = props;
  return (
    <div>
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              <ItemComponent
                title={item.title}    //hardcoded
                description={item.description} //hardcoded
              />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default SlickCarouselDefault;

密碼箱
https://codesandbox.io/s/cocky-chaplygin-8oixz?file=/src/SlickCarousel.jsx:0-529 [1]: https://i.stack.imgur.com/wdyKy.png

Answer 1

您可以嘗試解構道具而不是硬編碼。

<ItemComponent {...item} />

Answer 2

您可以將 ItemComponent 做成自己的迷你組件，這樣它就不會依賴 SlickCarousel 組件。