使用 Typescript 创建 React 组件

Posted 2023-03-13

【中文标题】使用 Typescript 创建 React 组件

【英文标题】：Creating a React component with Typescript

【发布时间】：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接口系统，但我真的不知道如何实现它。 如果有打字稿专家，我会喜欢一些建议...

【参考方案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 <></>;
  
;