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

贾里德

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

运行后,npm install react-modal我看到node_modules\react-modal(以及其他几个文件夹)已创建。到现在为止还挺好。

但是,我似乎无法将该组件包含在我的项目中。如果我尝试import ReactModal from 'react-modal';在组件的 .js 文件的顶部,我会得到: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>
        );
    }
}
贾里德

如果有人遇到这个问题,我想添加我的决议。

我试图在没有 webpack 的情况下运行一个基本的 REACTJS 项目。react-modal 依赖于 webpack(我敢肯定,许多 React 组件也是如此)。由于我试图保持轻巧和敏捷,我删除了 react-modal 模块并“滚动了我自己的”模态对话框。

仅供参考,线索是控制台中的“需要未定义”错误 - 表明非浏览器(node.js)函数被命中。它期望使用 node.js 术语将 (webpack) 编译成一个单独的 js 文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将android现有应用程序转换为react-native android

如何将 React 添加到现有的 Electron 应用程序中?

如何将 React 与非平凡的 AngularJS 应用程序和现有的 grunt 配置集成?

如何将文件导入使用 create react app 作为原始文本的 react 应用程序?

如何将音频导入我的 Create-React-App 应用程序?

如何将现有的React应用程序(只是一个没有后端的UI)插入(注入?)到SilverStripe页面布局中?

将React或React Native嵌入到现有的移动应用程序中

如何将现有应用程序与 Joomla 集成?

如何将振幅分析与React应用程序集成?

将Redux添加到现有的React应用程序

将 react-native-web 应用程序嵌入到现有网站中

无法将 React-Native 添加到现有应用程序

将TypeScript添加到现有的create-react-app应用程序

将 ruby on rails 添加到现有的 React Native 应用程序

如何在jQuery上的现有jQuery应用程序中加载React组件

将react-native-web添加到现有的react-native应用程序时出错

将图像导入 React 应用程序构建后的问题

将 TypeScript 模块从本地模块导入 React 应用程序

将 css 文件导入特定组件 react 应用程序

如何将 Jquery 导入 React

如何将大量视频文件导入React应用

如何将Backbone / RequireJS模块导入React / Webpack应用

将刺激和导入映射添加到现有的 Rails 6.1 应用程序

将现有数据库导入新的 Dokku 应用程序

将单个React Native视图添加到现有Android应用程序的正确方法是什么?

如何将新的 React Native 应用程序与生产 React Native 应用程序连接起来

如何将现有的Angular1 Web应用程序转换为Cordova应用程序?

如何将现有的WPF应用程序转换为基于kinect的应用程序?

如何将滚动条添加到react-bootstrap Modal.Body中