如何在 HTML 中导入 react Antd 表？答案

【问题标题】：How to import react Antd table in HTML?如何在 HTML 中导入 react Antd 表？
【发布时间】：2019-12-04 16:36:54
【问题描述】：

我一直在做一个项目，我需要在其中导入 html 格式的反应组件。但是我卡住了我应该如何在 html 中导入 antd 组件。我在这里附加代码。什么是做这件事的正确方法
我是编码新手，这是第一个项目。如果有人可以帮助我，将不胜感激。

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.6/antd.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/jsx'>

  var Box = React.createClass({
    render: function () {
      const data1 = [
        [
          key='0',
          www = 'All India',
          circle= 'All India',
          subHeader1= 12,
          subHeader2= 66,
          subHeader3= 32,
          subHeader4=52,
          subHeader5= 74,
          subHeader6= 32
        ],
        [
          key='0',
          www = '1',
          circle= 'GUJ',
          subHeader1= 42,
          subHeader2= 16,
          subHeader3= 70,
          subHeader4=12,
          subHeader5= 54,
          subHeader6= 33
        ]]
      let data = [
        columns =  [
          [
            active= true,
            columnName = "Class",
            dataIndex= "www",
            id= "1",
            subHeader= null,
            style= {},
            visibility= true
          ],
          [
            active= true,
            columnName = "Circle",
            dataIndex= "circle",
            id= "1",
            subHeader= null,
            style= {},
            visibility= true
          ],
          [
            active= true,
            columnName= "Vodafone",
            id= "1",
            subHeader= [
              [
                month = "March",
                dataIndex= "subHeader1",
                style= []

              ],
              [
                month = "April",
                dataIndex = "subHeader2"

              ],
              [
                month = "May",
                dataIndex ="subHeader3"

              ]
            ]
          ]]
        ]
      const items = data.columns.map(item =>
        (
          item.subHeader ? (<ColumnGroup title={item.columnName}>
            {
              item.subHeader.map((it) => (
                it.style ? (<Column title={it.month} dataIndex={it.dataIndex} key="2"
                                    render={(text) => {
                                      return{
                                        props:{
                                          style: {background: parseInt(text) > 50 ? "#08AE4E" : "#f54840",
                                            color: "white", fontWeight:"bold"}
                                        },
                                        children: <div>{text}</div>
                                      }
                                    }
                                    }
                />): (<Column title={it.name} dataIndex={it.dataIndex} key="2"/>)
              ))
            }
          </ColumnGroup>) : <Column title={item.columnName} dataIndex={item.dataIndex} key="age" />
        )
      )
      return (
        <div>
          <h1></h1>
          <Table dataSource={data1} bordered title='table' >
            {items}
          </Table>
          <h1>NPS</h1>
        </div>
      );
    }
  });

  ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>

【问题讨论】：

标签： html reactjs antd

【解决方案1】：

在html中不能直接读取导入组件antd，必须使用DOM进行操作，否则最好将js和html文件分开

【讨论】：