如何在js文件中使用jsx？

Question

比如把这段antd的table column描述代码放到另一个单独的ts文件里就会报错无法编译render中的jsx语法

export const column: TableColumnType<any>[] = [
    ...,
    {
        title: 'operation',
        dataIndex: 'operation',
        render: (_, record: { key: React.Key }) => (
            <Typography.Link>
                Edit
            </Typography.Link>
        ),
    },
]

这种情况有没有解决方法？

Answer 1

我的解决方法是另新建一个renderTsx.tsx文件

// renderTsx.tsx
import { FC } from "react";
import { Typography } from "antd";

const { Link } = Typography

export const operationColumnRender: FC = (_, record: { key: React.Key }) => (
    <Link>
        Edit
    </Link>
)

然后在ts文件里import这个方法

有没有别的不用import的方法？

Answer 2

脑内编译一下，不用jsx语法就是了

React.createElement(Typography.Link,{},'Edit')

Answer 3

把文件后缀从ts改为tsx