คิด UI หัวขาด

ส่วนประกอบที่ไม่มีอินเทอร์เฟซ…

ปรัชญาหัวขาด

ส่วนประกอบของเว็บประกอบด้วยสองสิ่ง อินเทอร์เฟซและตรรกะเพื่อขับเคลื่อนอินเทอร์เฟซ

การแยกตรรกะออกจากส่วนต่อประสานเป็นปรัชญาหลักของหัวขาด

ช่วยให้เราสามารถสร้างเว็บคอมโพเนนต์ที่ปรับเปลี่ยนได้และมีความยืดหยุ่นสูง ซึ่งสามารถทำงานได้ในไลบรารี UI

ตัวอย่าง — ปุ่มสลับแบบสแตนด์อโลน

เราจะใช้ React Hooks เพื่อสร้างปุ่มสลับ

ในการสร้างปุ่ม สิ่งที่เราต้องมีคือสถานะที่ระบุว่าปุ่มถูกกดหรือไม่ และตัวจัดการเหตุการณ์เพื่อสลับสถานะเมื่อคลิก

คำจำกัดความของประเภท

type ButtonPropsGetter = () => {
  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
  "aria-pressed": "true" | "false";
};

type StateGetter = () => boolean;

type ToggleButtonGetters = {
  getButtonProps: ButtonPropsGetter;
  getState: StateGetter;
};

const useToggleButton = (): ToggleButtonGetters => {
  const [status, setStatus] = useState(false);

  const onClick = () => {
    setStatus((prev) => !prev);
  };

  const getButtonProps: ButtonPropsGetter = () => {
    return { onClick, "aria-pressed": status ? "true" : "false" };
  };

  const getState: StateGetter = () => status;

  return { getButtonProps, getState };
};

การบริโภค

import useToggleButton from "./useToggleButton";

const App: FC = () => {
  const { getButtonProps, getState } = useToggleButton();
  const status = getState();

  return (
    <div>
      <h1>Hello World!</h1>
      {/* We can replace this button with any button */}
      <button {...getButtonProps()}>{status ? "ON" : "OFF"}</button>
    </div>
  );
}

ห้องสมุดหัวขาดยอดนิยม

• ตาราง Tanstack
• ทำปฏิกิริยา Dropzone
• เปลี่ยนเกียร์ลง