反应与泛型

在React中使用泛型

我将写一个使用React的泛型示例。

请提供示例代码。

~/develop/generics_react$ tree -I node_modules 
.
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── components
│   │   ├── Dialog.tsx
│   │   ├── Display.tsx
│   │   └── SelectList.tsx
│   ├── index.tsx
│   └── types
│       └── type.ts
├── tsconfig.json
└── yarn.lock

import React from 'react';
import './App.css';
import { Dialog, DisplayList } from './components/Display';

function App() {
  const display: JSX.Element = <div>hello</div>;
  const dialog = Dialog();

  return (
    <div className="App">
      <DisplayList content={display} />
      <DisplayList content={dialog} />
      {/* //　これはエラーになる.
    // <DisplayList content=""> */}
    </div>
  );
}

export default App;

export type Kitten = {
  id: string;
  cuteName: string;
  cutePic: string;
};

export type Bear = {
  id: string;
  name: string;
  imageUrl: string;
};

export type Animal = Kitten | Bear;

export type Dialog = {
  content: React.ReactNode; // ここで渡されるコンポーネントを受け取る型を指定
};

export type PageLink = {
  content: React.ReactNode; // ここで渡されるコンポーネントを受け取る型を指定
  url: string;
};

export type DisplayProps<T extends JSX.Element> = {
  content: T;
};

export const DisplayList = <T extends JSX.Element>({
  content,
}: DisplayProps<T>) => {
  return content;
};

export const Dialog = () => {
  return (
    <div>
      <dialog open>
        <p>Greetings, one and all!</p>
        <form method="dialog">
          <button>OK</button>
        </form>
      </dialog>
    </div>
  );
};

export const PageLink = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <button>ボタン1</button>
          </li>
          <li>
            <button>ボタン2</button>
          </li>
        </ul>
      </nav>
    </div>
  );
};

这样总算能用了。

export type DisplayProps<T extends JSX.Element> = {
  content: T;
};

这里很重要，DisplayProps只允许使用JSX.Element。没有这个，就等同于any类型。
只有这么写，我们无法充分享受泛型的好处，所以下次的文章中我们将深入讨论泛型。