如何在 html 中使用 React 組件 Ant 設計

Question

我正在尋求你的幫助。 我的任務很簡單。 我通過 CDN（沒有 Node js 服務器）和 Ant Design CDN 使用 React。 我需要在我的 React 應用程序中使用 Ant 設計組件。 但是，它根本不適合我。 我記得，幾個月前我做過，但現在我無法復制它。 下面是我的代碼。 Chrome 控制台說

Panel.js:272 Uncaught TypeError: moment__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
    at Module../node_modules/_rc-time-picker@3.7.2@rc-time-picker/es/Panel.js (Panel.js:272)
    at __webpack_require__ (bootstrap:19)
    at Module../components/date-picker/wrapPicker.tsx (antd.js:9472)
    at __webpack_require__ (bootstrap:19)
    at Module../components/date-picker/index.tsx (antd.js:9344)
    at __webpack_require__ (bootstrap:19)
    at Module../components/index.tsx (index.tsx:1)
    at __webpack_require__ (bootstrap:19)
    at Object../index.js (index.js:25)
    at __webpack_require__ (bootstrap:19)

Cannot read property 'Button' of undefined

我用谷歌搜索了這個問題，顯然瀏覽器無法識別 require(import) 命令。 我真誠地請求你的幫助。 謝謝！

<!doctype html>
<html lang="en-us">
  <head>

    <!-- React CNDs -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js'></script>

    <!-- Material Design CDNs-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- <script type="module" src="https://unpkg.com/@material-ui/core@4.4.3/umd/material-ui.production.min.js"></script>  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.4/antd.js" integrity="sha256-x4ITqB7m84o5/YGY7vx7hmRvoWj/Yj7Zm4+Yxipq+r0=" crossorigin="anonymous"></script>
  </head>
  <body>


    <div id="root"></div>

    <script type="text/babel">
    const {Button} = window['antd']

        class App extends React.Component {

            render() {

              return (
                <Button type="primary">
                  Test
                </Button>
              );
            }
          }
    ReactDOM.render(<App />, document.getElementById('root')); 
    </script>
  </body>
</html>

Answer 1

按照這個示例項目。 導入的方式有所不同。

如何在 html 中使用 React 組件 Ant 設計

問題描述

1 個解決方案

解決方案1
0 2019-09-30 15:32:39

如何在 html 中使用 React 組件 Ant 設計

問題描述

1 個解決方案

解決方案1 0 2019-09-30 15:32:39

解決方案1
0 2019-09-30 15:32:39