在离子反应中始终使用.jsx代替.tsx有什么缺点吗？

Question

如果我们在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;

我打电话给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;

Answer 1

由于ionic默认使用TypeScript，如果您希望使用普通的JavaScript，有两个选项供您选择：

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

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

"strict": false 

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

看似更简单的选择是将allowJs上的true设置为tsconfig.json

"allowJs": true

您可以选择使用以上选项中的一个或两个，具体取决于您的项目。归根结底，TypeScript是JavaScript的超集，只要您禁用TypeScript的使用附带的其他功能，常规JavaScript就应该在TypeScript文件上运行。]