尝试按照https://github.com/bvaughn/react-virtualized-select使用“react虚拟化-select”
我们在从npm获得require.js之后导入的应用程序中使用了css,而不是这里提到的导入css ....as https://github.com/bvaughn/react-virtualized-select#simple-example
注意:发布完整的代码以便于理解上下文请忽略其余代码中的任何短代码,因为如果删除VirtualizedSelect标记,错误将消失。
var React = require('react');
var ReactDOM = require('react-dom');
var VirtualizedSelect = require('react-virtualized-select');
module.exports = React.createClass({
componentName: 'Search',
getDefaultProps() {
return {};
},
getInitialState() {
return {
error: false,
authenticated: false,
visible: true,
data: null,
showAccountSelection: false,
selected: null,
search: '',
optionPartnerList: []
};
},
componentDidMount () {
var qS = queryString.parse(location.search);
if (qS && qS.search) {
this.setState({search: qS.search, visible: true});
}
this._unsubscribe = AppStore.listen(Utils.createRefluxComponentDispatcher(this));
},
componentDidUpdate: function () {
if (this.refs.inputSearch) {
this.refs.inputSearch.focus();
this.refs.inputSearch.select()
}
},
componentWillUnmount () {
this._unsubscribe();
},
render: function () {
var self= this;
if (!this.state.authenticated) {
return null;
}
let componentDisabled = this.state.async ? true : false;
let buttonIcon;
let closeButton = AppStore.selectedAccount ?
<a href="#" className="closebtn" onClick={this.closeNav}>×</a> :
(<a key="-1" className="logout-link dropdown-item t-font" onClick={AppActions.logout} href="#">
<i className="fa fa-sign-out m-r-10"></i>Logout</a>);
let overlayStyle = {width: this.state.visible ? '100%' : '0px', display: this.state.visible ? 'block' : 'none', 'overflowX': 'hidden', 'overflowY': this.state.overlayOverflowY};
if (this.state.visible) {
AppActions.hideBodyScrollBar();
} else {
AppActions.showBodyScrollBar();
}
if (!this.state.async) {
buttonIcon = <i className="fa fa-search"></i>
} else {
buttonIcon = <i className="fa fa-cog fix fa-spin"></i>
}
//TODO: refactor this make it css driven using flex box
let style = {top: '37%'};
if (this.state.data && Object.keys(this.state.data).length > 1) {
style = {top: '10%'};
}
return (
<div style={{float:'left'}} className="search-div">
{this.searchIcon()}
<div className="overlay" style={overlayStyle}>
{closeButton}
<div className="global-search center-content-wrapper" style={style}>
<form id="searchFormComponent" ref={function(){$('#searchFormComponent').show('fast')}}
className="global-search" onSubmit={this.handleClick} style={{height: '500px'}}>
{this.errorRender()}
<div className="f-row f-center">
<input id="searchbox" type="text" ref="inputSearch" className="form-control f-9 searchbox"
placeholder="SEARCH FOR ACCOUNT" required
style={{marginBottom:'1px'}} disabled={componentDisabled}
defaultValue={this.state.search}>
</input>
<VirtualizedSelect
options={self.optionPartnerList}
onChange={(selectValue) => this.setState({ selectValue })}
value={this.state.selectValue}
/>
<button id="searchbutton" className="btn btn-lg btn-primary btn-block t-font f-1"
disabled={componentDisabled}
onClick={this.handleClick}
style={{ paddingLeft: '4px',paddingRight: '4px', fontSize:'1.1em',marginLeft:'4px'}}>
{buttonIcon}
</button>
<SearchHint ref={"searchHint"} toggleOverlayStyle={this.toggleOverlayStyle}/>
</div>
<SearchAccountSelector data={this.state.search == ''? {}: this.state.data}/>
</form>
</div>
</div>
</div>
);
}
});
得到这个异常
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `exports`. at invariant (bundle.c81618e7.js:5333) at instantiateReactComponent (bundle.c81618e7.js:27936) at Object.updateChildren (bundle.c81618e7.js:17273) at ReactDOMComponent._reconcilerUpdateChildren (bundle.c81618e7.js:23289) at ReactDOMComponent._updateChildren (bundle.c81618e7.js:23393) at ReactDOMComponent.updateChildren (bundle.c81618e7.js:23380) at ReactDOMComponent._updateDOMChildren (bundle.c81618e7.js:19340) at ReactDOMComponent.updateComponent (bundle.c81618e7.js:19154) at ReactDOMComponent.receiveComponent (bundle.c81618e7.js:19116) at Object.receiveComponent (bundle.c81618e7.js:24009)
找不到我在这方面做过的任何帮助,将不胜感激,请找到我的package.json条目。
"react": "^15.6.2",
"react-dimensions": "^1.3.0",
"react-dom": "^15.6.2",
"react-virtualized-select": "3.1.0",
发布于 2017-11-03 21:50:29
问题在于这句话:
var VirtualizedSelect = require('react-virtualized-select');
需要改为:
var VirtualizedSelect = require('react-virtualized-select').default;
错误消息是因为导入的不是React组件,而且似乎与中的export default
被抄袭到ES5的方式有关。
发布于 2017-11-03 21:24:29
我认为您忘记为类组件添加呈现方法。
签出下面的代码
var React = require('react');
var ReactDOM = require('react-dom');
var VirtualizedSelect = require('react-virtualized-select');
module.exports = React.createClass({
componentName: 'Search',
getDefaultProps() {
return {};
},
getInitialState() {
return {
error: false,
authenticated: false,
visible: true,
data: null,
showAccountSelection: false,
selected: null,
search: '',
optionPartnerList: []
};
},
componentDidMount () {
var qS = queryString.parse(location.search);
if (qS && qS.search) {
this.setState({search: qS.search, visible: true});
}
this._unsubscribe = AppStore.listen(Utils.createRefluxComponentDispatcher(this));
},
componentDidUpdate: function () {
if (this.refs.inputSearch) {
this.refs.inputSearch.focus();
this.refs.inputSearch.select()
}
},
componentWillUnmount () {
this._unsubscribe();
}
render() {
return (
<div style={{float:'left'}} className="search-div">
{this.searchIcon()}
<div className="overlay" style={overlayStyle}>
{closeButton}
<div className="global-search center-content-wrapper" style={style}>
<form id="searchFormComponent" ref={function(){$('#searchFormComponent').show('fast')}}
className="global-search" onSubmit={this.handleClick} style={{height: '500px'}}>
{this.errorRender()}
<div className="f-row f-center">
<input id="searchbox" type="text" ref="inputSearch" className="form-control f-9 searchbox"
placeholder="SEARCH FOR ACCOUNT" required
style={{marginBottom:'1px'}} disabled={componentDisabled}
defaultValue={this.state.search}>
</input>
<VirtualizedSelect
options={self.optionPartnerList}
onChange={(selectValue) => this.setState({ selectValue })}
value={this.state.selectValue}
/>
<button id="searchbutton" className="btn btn-lg btn-primary btn-block t-font f-1"
disabled={componentDisabled}
onClick={this.handleClick}
style={{ paddingLeft: '4px',paddingRight: '4px', fontSize:'1.1em',marginLeft:'4px'}}>
{buttonIcon}
</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
});
https://stackoverflow.com/questions/47104177
复制相似问题