React-materialize-css模态无效，因为它无法读取M的模态类

Question

因此，我一直试图使模式以多种方式工作，例如普通的javascript / react，react-modal和materialize-css。现在，使用materialize-css似乎几乎可以正常运行，但是没有，我得到以下错误：

projects.js:16 Uncaught TypeError: Cannot read property 'Modal' of undefined
    at HTMLDocument.<anonymous>

我在Google周围搜索都无济于事。我也尝试过使用jQuery，但这也没有用。

我的代码：

import React, { Component } from 'react';
import Link from 'react-router-dom';
import "./projects.css";
import helper from "../../Helpers/helpers";
import ReactDOM from 'react-dom'
import M from 'react-materialize'

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.getElementById('modal1');
    var options = {};
    var instance = M.Modal.init(elems);
    instance.open();
});

class Projects extends Component {
    constructor() {
        super();
        this.state = {
            projects: [],
            name: '',
            description: ''
        };
    }

    componentDidMount() {}

    handleChange = ({ target }) => {
        this.setState({ [target.name]: target.value });
    };

    userIsAdmin = (project, user) => {};

    userIsOwner = (project, user) => {};

    onSubmit = event => {};

    deleteProject(projectId) {};

    editProject(projectId) {}

    render() {
        const projects = this.state.projects;
        return (
            <div className={'margin container row'}>
                <div className={"col s12"}>
                    <div className={'card'}>
                        <div className={'card-content'} id={'projectsCard'}>
                            <h4 className={'card-title'}>Uw projecten</h4>
                            <div id="modal1" className={"modal"}>
                                <div className="modal-content">
                                    <h4>Modal Header</h4>
                                    <p>A bunch of text</p>
                                </div>
                                <div className="modal-footer">
                                    <a href="#modal1" className="modal-close waves-effect waves-green btn-flat">Agree</a>
                                </div>
                            </div>
                            <table className={"highlight"}>
                                <thead>
                                    <tr>
                                        <th>Project naam</th>
                                        <th>Project beschrijving</th>
                                        <th>project opties</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {projects.map(project =>
                                        this.userIsOwner(project,user)

                                        // If the current user is a owner of a project show 
                                        ?
                                            <tr className={'collection-item'} key={project._id}>
                                                <td><a href={'/project/' + project._id}>{project.name}</a></td>
                                                <td>{project.description}</td>
                                                <td>
                                                    <a className="waves-effect waves-light btn modal-trigger material-icons"
                                                       href="#modal1">delete</a>
                                                </td>
                                            </tr>
                                        :
                                            this.userIsAdmin(project,user)
                                            ?
                                                <tr className={'collection-item'} key={project._id}>
                                                    <td><a href={'/project/' + project._id}>{project.name}</a></td>
                                                    <td>{project.description}</td>
                                                    <td></td>
                                                </tr>
                                            :
                                                <tr className={'collection-item'} key={project._id}>
                                                    <td><a href={'/project/' + project._id}>{project.name}</a></td>
                                                    <td>{project.description}</td>
                                                    <td></td>
                                                </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className={"col s12"}>
                    <div className={'card'}>
                        <div className={'card-content'}>
                            <h4 className={'card-title'}>Maak een project aan</h4>
                            <div>
                                <form onSubmit={this.onSubmit}>
                                    <div className={"input-field col s6"}>
                                        <input placeholder={"Projects naam *"} id={"projectName"} type={"text"} name={'name'} className={"validate blue-text"} value={this.state.name} onChange={this.handleChange}/>
                                        <label htmlFor={"projectName"} className={"blue-text"}>Project naam</label>
                                    </div>
                                    <div className={"input-field col s6"}>
                                        <input placeholder={"Projects beschrijving *"} id={"ProjectDesc"} type={"text"} name={'description'} className={"validate blue-text"} value={this.state.description} onChange={this.handleChange}/>
                                        <label htmlFor={"projectDesc"} className={"blue-text"}>Project beschrijving</label>
                                    </div>
                                    <button className="btn waves-effect waves-light" type="submit">
                                        Submit
                                        <i className="material-icons right">send</i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}


export default Projects;

和我的package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-materialize": "^3.4.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "0.9.x"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5001"
}

我的问题：我该如何解决这个问题？我对反应/实现的知识已经用尽。

Answer 1

Primo，看来您没有很好地使用react-material ...

您不必在React应用程序中使用本机实现的javascript ...

看这里：http://react-materialize.github.io/react-materialize/?path=/story/react-materialize--welcome && http://react-materialize.github.io/react-materialize/?path=/story/javascript-modal--fixed-footer

如果您在信息选项卡上，如果要在组件安装架上以打开状态显示它，则会看到一个属性'show'。>

Secundo，如果您使用本机js document.ready，并且想使用'M'变量，是否将本机实现包含在index.html中？