html中使用React+antd

    <script src="/public/js/18react.development.js"></script>
    <script src="/public/js/18react-dom.development.js"></script>
    <script src="/public/js/7.25babel.min.js"></script>
    <script src="/public/js/axios.min.js"></script>
    <script src="/public/js/dayjs.min.js"></script>
    <script src="/public/js/5.14antd.min.js"></script>

都是下载在本地引入的CDN

在使用antd是老是报错 antd is not default 引入了dayjs 当然在使用DataPick组件是必须的

在script标签内书写React代码 不能用import 去引入

<script type="text/babel">
    const { useState, useEffect, useRef } = React;
    const {Table, Button, Flex, message} = antd

    const FormTablePage = () => {
        const columns = [
            {
                title: 'Form Name',
                width: 150,
                dataIndex: 'formName',
                key: 'formName',
                fixed: 'left',
            },
            {
                title: 'Form Id',
                width: 250,
                dataIndex: 'formId',
                key: 'formId',
            },
            {
                title: 'GmtCreate',
                dataIndex: 'gmtCreate',
                key: 'gmtCreate',
            },
            {
                title: 'Category',
                dataIndex: 'formType',
                key: 'formType',
            },
            {
                title: 'GmtModified',
                dataIndex: 'gmtModified',
                key: 'gmtModified',
            },
            {
                title: 'Action',
                key: 'operation',
                fixed: 'right',
                width: 200,
            },
        ];

        return <div>
            <Table
                columns={columns}
                dataSource={[]}
                bordered
            />
        </div>
    };

    const container = document.getElementById("formtable");
    const root = ReactDOM.createRoot(container);
    root.render(<FormTablePage/>);
</script>

这样一个简单的Table页就完成了