如何在js文件中使用jsx?

see311
  • 384

比如把这段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>
        ),
    },
]

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

回复
阅读 687
3 个回答

我的解决方法是另新建一个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的方法?

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

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

把文件后缀从ts改为tsx

宣传栏