Question

我是ReactJS的新手。所以我有一个简单的问题。

我使用了index.html中包含的物化CDN。但是，当我尝试在组件中对其进行初始化时，它说“ M”未定义。我应该在哪里初始化它。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <title>React App</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

我的组件看起来像这样

import React from "react";

class Dashboard extends React.Component {
  componentDidMount() {
    document.addEventListener("DOMContentLoaded", function() {
      var elems = document.querySelectorAll(".carousel");
      var instances = M.Carousel.init(elems, options);
    });
  }
}

export default Dashboard;

CodeSandbox链接：-https://codesandbox.io/s/40jvz6j590

Answer 1

好吧，如果您正在使用它，则需要将其导入：D

import React from "react";
import {Carousel} from "react-materialize";

这是https://react-materialize.github.io/#/carousel

的使用方法

在React应用中初始化实现

1 个答案: