redux 在React中使用CDN

at0kjp5o  于 2022-11-12  发布在  React
关注(0)|答案(2)|浏览(294)

我已通过NPM安装了React,但使用CDN时遇到困难。
我在./public/index.html文件中包含了CDN脚本,但是当我在任何组件中使用它时,它都无法识别我尝试使用的第三方包。
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
已尝试使用Axios,但无法使用:

axios.post("https://burger-builder-c5a0d.firebaseio.com/orders.json", order)
            .then(response=>{
                alert("You ordered successfully!");  //shows an alert indicating a successful process
                console.log(response); //sends results to the server
                this.setState({
                    showModal: false, //closes the modal
                    loading:false,
                    purchasable: false
                })

            }).catch(error=>{
                       this.setState({
                            showModal: false,
                            purchasable: false,
                            loading: false
                        })
                console.log(error);
            })

已尝试使用redux,但也无法识别

const reduxStore= redux.createStore;
       const store =  createStore();

Here's the error that I'm getting

9jyewag0

9jyewag01#

您是否通过require导入了axios或redux包?如下所示:

const axios = require('axios');

编辑

你说得对。你甚至不需要什么东西,因为你是从CDN导入的
我尝试使用React.js文档中的HTML样板文件,并从您的源代码导入CDN。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function fetch() {
        axios
          .get("https://jsonplaceholder.typicode.com/todos/1")
          .then(response => console.log(response.data));
      }
      ReactDOM.render(<h1>{fetch()}</h1>, document.getElementById("root"));
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>
vbopmzt1

vbopmzt12#

您似乎试图通过CDN导入ReduxAxios,尽管它们都可以作为NPM包使用。
无论如何,您可以使用ReactJs的createElement()简单地导入任何CDN脚本。

componentDidMount = () => {
    const script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js";
    script.async = true;
    document.body.appendChild(script);
  };

相关问题