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 组件。