如何将 react-modal 导入现有应用程序？

Question

我一直在慢慢尝试迁移现有的大型 php/jquery 项目的某些部分以使用 ReactJS，尤其是使用一些可重用的组件。 ReactJS 对我来说一直运行良好，但今天我尝试使用 npm 导入一个库，这对我来说是全新的。

在运行 npm install react-modal 之后，我看到创建了 node_modules\react-modal（以及其他几个文件夹）。到目前为止，还不错。

但是，我似乎无法将该组件包含到我的项目中。如果我在我的组件的 .js 文件的顶部尝试 import ReactModal from 'react-modal';，我得到：Uncaught ReferenceError: require is not defined。如果我尝试直接包含 node_modules\react-modal\lib\components\Modal.js 文件，我会抛出错误，我意识到这可能是错误的方法，但我在这里抓住了救命稻草。我怀疑我遗漏了一些基本的东西，但我似乎无法弄清楚这一点。有人有什么想法吗？

编辑：这是我目前将 React 包含到我的项目中的方式：

<!-- Load React. -->
{if $env=="prod"}
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

    {* tabs support *}
    <script src="https://unpkg.com/prop-types/prop-types.js"></script>
    <script src="https://unpkg.com/react-tabs@3/dist/react-tabs.production.min.js"></script>
    <link href="https://unpkg.com/react-tabs@3/style/react-tabs.css" rel="stylesheet"> 

{else}

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    {* tabs support *}
    <script src="https://unpkg.com/prop-types/prop-types.js"></script>
    <script src="https://unpkg.com/react-tabs@3/dist/react-tabs.development.js"></script>
    <link href="https://unpkg.com/react-tabs@3/style/react-tabs.css" rel="stylesheet">

{/if}

{* Babel support *}
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

这是完整的组件（matchSelector.js 文件的内容）：

import Modal from 'react-modal';

/**
 * Select a match with hooks to return the proper match info to the instantiator
 */
class MatchSelector extends React.Component {
    /**
     * Class Constructor
     * 
     * props expected:
     *      className - (optional) use if you want to style the picker button/icon differently. Note that
     *      if given, all standard classes will be overrided.
     * 
     *      type - (optional) can be "text", "icon", "both". Default is "both".
     * 
     *      text - (optional) if type is "text" or "both", the text to use on the button. Default is "Select Match"
     * 
     */
    constructor(props) {
        super(props);       // let Dad know what's up

        this.state = {showDialog:false}

        this.handleClick = this.handleClick.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleClick(event) {
        event.preventDefault();

        this.setState({showDialog:true});
    }

    handleClose() {
        this.setState({showDialog:false});
    }

    render() {
        const defaultClassName = "ui-state-default ui-corner-all ui-button compressed";
        let className = (odcmp.empty(this.props.className)?defaultClassName:this.props.className);

        return (
                <React.Fragment>
                    <button 
                        className={className}   
                        onClick={this.handleClick}>
                            {this.buttonContent()}
                    </button>
                    <MatchSearchDialog
                        show={this.state.showDialog} />
                </React.Fragment>
        );
    }

    buttonContent() {
        var text = (odcmp.empty(this.props.text)?"Select Match":this.props.text);

        if (odcmp.empty(this.props.type) || (this.props.type.toLowerCase()=="both")) {
            return (
                <span><span className="ui-icon ui-icon-search inline"></span>{text}</span>
            );
        } else if (this.props.type.toLowerCase()=="icon") {
            return (
                <span className="ui-icon ui-icon-search inline"></span>
            );
        } else {
            return text;
        }
    }
}

class MatchSearchDialog extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <ReactModal isOpen={false}><div>hi</div></ReactModal>
        );
    }
}

Answer 1

the npm package 的文档声明要导入模态框，您需要这样写：

import Modal from 'react-modal';

这不是您尝试的 import ReactModal from 'react-modal'; (ReactModal => Modal).

正如您在 this repro on Stackblitz 上看到的那样，对我来说一切都很好。这是代码：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import Modal from 'react-modal';
import "./style.css";

Modal.setAppElement('#root');

const App = () => {
  const [modalIsOpen,setIsOpen] = React.useState(false);
  const openModal = () => {
    setIsOpen(true);
  }

  const closeModal = () => {
    setIsOpen(false);
  }

  return (
    <div>
      <p>Start editing to see some magic happen :)</p>
      <button onClick={openModal}>Open Modal</button>
        <Modal
          isOpen={modalIsOpen}
          contentLabel="Example Modal"
        >
        <div>Wow nice modal !</div>
        <button onClick={closeModal}>close</button>
        </Modal>
    </div>
  );
};

render(<App />, document.getElementById("root"));

Answer 2

如果有人运行参与其中，我想添加我的解决方案。

我试图运行一个没有 webpack 的基本 REACTJS 项目。 react-modal 依赖于 webpack（我敢肯定，许多 React 组件也是如此）。由于我试图保持轻巧和敏捷，我删除了 react-modal 模块和 "rolled my own" 模态对话框。

仅供参考，线索是控制台中的 "require not defined" 错误 - 表明非浏览器 (node.js) 函数被命中。它期望使用 node.js 术语将 (webpack) 编译成一个单独的 js 文件。

如何将 react-modal 导入现有应用程序？

How do I import react-modal into existing application?

reactjs

react-modal