【前端】taro 启动文件app.ts 修改成app.tsx

先说下为啥会有这一篇？我们知道tsx 其实就是 typescript xml ，即能支持写诸如<View/>、<Text/>、<div/>等标签的脚本。

但使用 taro init 初始化的工程，入口文件不是tsx，而是ts。这意味着，我不能在里面写标签，更意味着我不能写一个全局Context（不熟悉的可以先科普一下：react context），让所有的页面（比如tabbar）都能用到。

原因很简单：Context的数据流也是自上而下的，没有一个顶层的Context把所有的子组件包住，这些子组件就没法公用同一个Context。

如果在 ts 中写标签会出现如下的错误：

而Context 在react中使用的时候也是以标签的形式出现的，这意味着我想用一个在顶层的全局Context，就必须要把 app.ts 改成 app.tsx。

修改一

直接将app.ts 改成 app.tsx

结果如下：

app.ts 改成 app.tsx 后，报错已经消失，并且微信开发者工具也能正常调试代码。

但问题没有这么简单，因为：我们的react-native端，会出现白屏：

修改二

将app.ts 改成 app.tsx后，把里面的View 这种有实际意义的标签给去了，只保留<ContextAuth.Provider> 这种没有实际意义，只为了提供全局Context的标签。

import React, {Component, PropsWithChildren, useContext, useState} from 'react'
import './app.scss'
import {ContextAuth} from "./register-center/context-app/auth/context-auth";
import Taro from '@tarojs/taro'
import {View} from "@tarojs/components";
export default function App(props) {
  // const {} = props
  const contextAuth = useContext(ContextAuth)
  const [auth, setAuth] = useState({...contextAuth[0]})//权限控制
  return <ContextAuth.Provider value={[auth, setAuth]}>{props.children}</ContextAuth.Provider>
}

可以看到，改完后，react-native端恢复正常。

至于为啥react-native端在app.tsx中包含View时会出现异常，我就没做深入研究了，感兴趣的朋友，可以交流一波。这次的试验的结果是：app.tsx中允许出现Context标签但不能包含有实际意义的标签。