使用 Typescript 创建 React 组件答案

【问题标题】：Creating a React component with Typescript使用 Typescript 创建 React 组件
【发布时间】：2021-08-30 06:07:21
【问题描述】：

我最近在学习 typescript，我必须使用良好的实践将一个假的 react 组件转换为 typescript。

目前我有类似的东西

import axios from "axios";
import { useEffect, useState } from "react";



//var component = (props: any) => {
export default const component = (props: any) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};

//export default component;

我知道我应该使用Typescript接口系统，但我真的不知道如何实现它。如果有打字稿专家，我会喜欢一些建议...

【问题讨论】：

标签： reactjs typescript react-hooks react-typescript typescript1.8

【解决方案1】：

您可以从更换道具开始。 useEffect 和 useState 调用不能放在 if 语句中，因此必须移动。

import {FC} from "react";

interface IProps {
    isLists: boolean;
    lists: { text: '' }[];
    show: boolean;
}

const MyComponent: FC<IProps> = ({isLists, lists, show}) => {
    let listeOuNon = 0;
    const [trad, ajoutTrad] = useState('');

    useEffect(() => {
        if (isLists) {

            (async () => {

                axios.get("/api/trad").then((reponse) => {
                    if (reponse.status == 200) {
                        ajoutTrad(reponse.data);
                    }
                });
            })();
        }
    }, [isLists]);

    if (!show) {
        return null;
    }

    return (
        <div>
            {isLists ? (
                <div>
                    <div>le super titre {trad}</div>
                    <div>
                        <ul>
                            {listes.map((elements: any) => (
                                <li>{elements.text}</li>
                            ))}
                        </ul>
                    </div>
                </div>
            ) : (
                <div>
                    <div>le super titre</div>
                    <div>Bonjour tout le monde</div>
                </div>
            )}
        </div>
    );
};

export default MyComponent;

【讨论】：

【解决方案2】：

这是一个打字稿组件的简单示例

interface ComponentProps {
  organisationId: string;
}

const Component: React.FC<ComponentProps> = (props) => {
  return ();
}

【讨论】：

【解决方案3】：

您可以使用类型和/或接口：

import axios from "axios";
import { useEffect, useState } from "react";

interface List {
  // your fields here
}

type Props = {
  lists: List[];
  isLists: boolean;
  show: boolean;
}

export default const component = (props: Props) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};

【讨论】：