时间戳

首页 > 解决方案 > 在 ionic-react 中一直使用 .jsx 而不是 .tsx 有什么缺点吗？

reactjs - 在 ionic-react 中一直使用 .jsx 而不是 .tsx 有什么缺点吗？

问题描述

如果我们在 ionic-react 中编写 jsx 语法会发生什么？是state={}对象并且props在 .tsx 文件中有效。我使用 .jsx 文件而不是 .tsx 创建前端，它会不会在部署中造成麻烦，如果是这样的话。我如何在不依赖打字稿的情况下克服这个问题？ 

import React, { Component } from "react";
import { IonGrid, IonRow, IonCol, IonButton } from "@ionic/react";
import LocationComp from "../comon/locationComp";

class Tab1_react extends Component {
  state = {
    province: [{ id: 1, name: "Western province" }],

    district: [
      { id: 1, name: "Kaluthara" },
      { id: 2, name: "Colombo" },
      { id: 3, name: "Gampaha" },
    ],
  };

  render() {
    return (
      <IonGrid>
        {/* 1 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.province}
              type="Province"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 2 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={this.state.district}
              type="District"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 3 row */}
        <IonRow>
          <IonCol>
            <LocationComp
              data={[{ id: 1, name: "Not Yet" }]}
              type="Town"
              name="name"
              id="id"
            />
          </IonCol>
        </IonRow>

        {/* 4 row */}
        <IonRow>
          <IonCol>
            <IonButton fill="outline" expand="block" color="primary">
              Search
            </IonButton>
          </IonCol>
        </IonRow>

      </IonGrid>
    );
  }
}

export default Tab1_react;

我做了一个反应组件调用 locationComp 

import React, { Component } from "react";
import {
  IonButton,
  IonSelect,
  IonSelectOption,
  IonItem,
  IonLabel,
} from "@ionic/react";

class LocationComp extends Component {
  state = {};


  render() {

    const {data,name,id,type} = this.props;

    return (
      <IonItem>
        <IonLabel>{type}</IonLabel>
        <IonSelect
          //value={gender}
          placeholder="Select One"
          //   onIonChange={(e) => setGender(e.detail.value)}
        >
            {data.map(e=>(
                <IonSelectOption key={e["id"]} value="female">{e["name"]}</IonSelectOption>
            ))}

        </IonSelect>
      </IonItem>
    );
  }
}

export default LocationComp;

标签： reactjstypescriptionic-frameworkionic-nativeionic-react

解决方案

由于 ionic 默认使用 TypeScript，如果您希望坚持使用纯 JavaScript，有几个选项可供您选择：

1）无需将所有.tsx/.tx文件分别重命名为.jsx/.js -

在您的 上tsconfig.json，您可以简单地将strict选项设置为false，这将基本上禁用类型检查。

"strict": false

2)明确告诉 TypeScript 应该允许 JavaScript 文件-

一个看似更简单的选项是设置allowJs为truetsconfig.json

"allowJs": true

根据您的项目，您可以选择使用上述选项中的一个或两个。归根结底，TypeScript 是 JavaScript 的超集，只要您禁用伴随使用 TypeScript 的附加功能，常规 JavaScript 就应该在 TypeScript 文件上运行。

推荐阅读