首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用react虚拟化-选择时出错

使用react虚拟化-选择时出错
EN

Stack Overflow用户
提问于 2017-11-03 20:47:43
回答 2查看 1.1K关注 0票数 0

尝试按照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标记,错误将消失。

代码语言:javascript
运行
复制
    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}>&times;</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>
        );
    }
}); 

得到这个异常

代码语言:javascript
运行
复制
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条目。

代码语言:javascript
运行
复制
"react": "^15.6.2",
"react-dimensions": "^1.3.0",
"react-dom": "^15.6.2",
"react-virtualized-select": "3.1.0",
EN

回答 2

Stack Overflow用户

发布于 2017-11-03 21:50:29

问题在于这句话:

代码语言:javascript
运行
复制
var VirtualizedSelect = require('react-virtualized-select');

需要改为:

代码语言:javascript
运行
复制
var VirtualizedSelect = require('react-virtualized-select').default;

错误消息是因为导入的不是React组件,而且似乎与中的export default被抄袭到ES5的方式有关。

票数 1
EN

Stack Overflow用户

发布于 2017-11-03 21:24:29

我认为您忘记为类组件添加呈现方法。

签出下面的代码

代码语言:javascript
运行
复制
    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>
        );
   }
    }
}); 

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47104177

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档