我一直在慢慢尝试迁移现有的大型 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] 删除。
我来说两句