标签：javascript reactjs es6-class

当我尝试通过按钮更改页面时,我遇到了React的问题(但是)控制台给了我：

Element type is invalid: expected a string (for built-in components) or >a class/function (for composite components) but got: undefined. You >likely forgot to export your component from the file it’s defined in.

但是当我将onClick代码放在类代码中时,它显示了jsx代码.所以它有效,但为什么我仍然得到错误？这是我的代码：

import React from 'react';
import {render} from 'react-dom';

//sass
require('../sass/style.scss');

var pages = ['Qrscan'];
var jsx = [<Qrscan />];

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {target: <Menu />};
        App.changePage = App.changePage.bind(this);
    }

    static changePage (tar) {
       this.setState({target: tar});
    }

    render () {
        return (
          this.state.target
        )
    }
}


//Rendering
class Menu extends React.Component {
    render() {
        return (
            <div id="root">
                <Header />
                <div className="container">
                    <But target="Qrscan" class="button button-QR" text="Use QR code" type="button" linkTo="" />
                    <But class="button button-URL" text="Use URL" type="button" />
                </div>
            </div>
        )
    }
}

class Qrscan extends React.Component {
    render() {
        return (
            <h1>test</h1>
        )
    }
}

//elements
class Header extends React.Component {
    render () {
        return (
            <div className="header">
                <div className="header-logo">Jukey</div>
            </div>
        )
    }
}

class But extends React.Component {
    getInfo () {
        for (var i = 0; i < pages.length; i++) {
            if(pages[i] == this.props.target) {
                return jsx[i];
            }
        }
    }

    render () {
        return (
            <button onClick={() => App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}</button>
        )
    }
}

render (<App />, document.getElementById('app'));

感谢您抽出宝贵时间帮我解决问题！

解决方法:

ES6类声明为not hoisted.

在定义var jsx = [< Qrscan />];的第二行中,该元素实际上是未定义的.当我打印出jsx数组的内容时,我得到：

Object {$$typeof: Symbol(react.element), type: undefined, key: null, ref: null, props: Object…}

因此,您只需将jsx数组声明转移到< Qrscan>之后.组件声明.

请参阅以下JSFiddle以获取修复,并在转移声明顺序后自行查看它是否有效(：

var pages = ['Qrscan'];

//Rendering
class Menu extends React.Component {
    render() {
        return (
            <div id="root">
                <Header />
                <div className="container">
                    <But target="Qrscan" class="button button-QR" text="Use QR code" type="button" linkTo="" />
                    <But class="button button-URL" text="Use URL" type="button" />
                </div>
            </div>
        )
    }
}

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {target: <Menu />};
        App.changePage = App.changePage.bind(this);
    }

    static changePage (tar) {
       this.setState({target: tar});
    }

    render () {
        return (
          this.state.target
        )
    }
}

class Qrscan extends React.Component {
    render() {
        return (
            <h1>test</h1>
        )
    }
}

var jsx = [<Qrscan />];

//elements
class Header extends React.Component {
    render () {
        return (
            <div className="header">
                <div className="header-logo">Jukey</div>
            </div>
        )
    }
}

class But extends React.Component {
    getInfo () {
        for (var i = 0; i < pages.length; i++) {
            if (pages[i] == this.props.target) {
                return jsx[i];
            }
        }
    }

    render () {
        return (
            <button onClick={() => App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}</button>
        )
    }
}

ReactDOM.render (<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>

标签：javascript,reactjs,es6-class
来源： https://codeday.me/bug/20190724/1522938.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。