从另一个组件更改光滑的滑块幻灯片

Question

我有两个单独的组成部分。在组件A中，我有一些链接，在组件B中，我有一个光滑的滑块。如何使用组件A中的Links onClick事件更改幻灯片。

Answer 1

您需要在最接近的公共父组件中管理滑块状态。

import React, { useState } from "react";

function Parent() {
  const [currentLink, setCurrentLink] = useState("LINK1");

  return (
    <>
      <Links onClick={setCurrentLink} />
      <Slider link={currentLink} />
    </>
  );
}

function Links({ onClick }) {
  return (
    <ul>
      <li>
        <button onClick={() => onClick("LINK1")}>Link 1</button>
      </li>
      <li>
        <button onClick={() => onClick("LINK2")}>Link 2</button>
      </li>
      <li>
        <button onClick={() => onClick("LINK3")}>Link 3</button>
      </li>
    </ul>
  );
}

function Slider({ link }) {
  switch (link) {
    case "LINK1":
      return <div>Link 1 Slides</div>; // However you want to render link 1 slides.
    case "LINK2":
      return <div>Link 2 Slides</div>; // However you want to render link 2 slides.
    case "LINK3":
      return <div>Link 3 Slides</div>; // However you want to render link 3 slides.
    default:
      return false;
  }
}