从基础TypeScript文件返回JSX的最简化实现方案是什么

最简实现步骤 #

• 第一步先修改文件后缀：将GridConfig.ts重命名为GridConfig.tsx，只有.tsx后缀的TypeScript文件才支持直接编写JSX语法
• 修正React导入语法，可选择性给方法补充TS类型标注让类型校验更严谨

修改后的完整代码如下：

import React from 'react'

export class GridConfig {
    getSomeJsx(): React.ReactElement {
        return (
            <tr><td>TEST</td></tr>
        )
    }
}

如果你的项目使用React17+版本，并且tsconfig.json中jsx配置项设为了react-jsx，则可以省略顶部的import React from 'react'导入语句，代码更精简。

调用示例 #

在业务组件中实例化后直接调用方法，返回的JSX可以直接嵌入渲染逻辑：

import { GridConfig } from './GridConfig'

const CustomGrid = () => {
  const gridConfig = new GridConfig()
  return (
    <table>
      <tbody>
        {gridConfig.getSomeJsx()}
      </tbody>
    </table>
  )
}

内容的提问来源于stack exchange，提问作者iron.man.rball