javascript – 元素类型无效：期望字符串(对于内置组件)或类/函数React Error

当我尝试通过按钮更改页面时,我遇到了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