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

元素类型无效:期望一个字符串(对于内置组件)或>一个类/函数(对于复合组件)但得到:undefined.您>可能忘记从其定义的文件中导出组件.

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

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

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

var pages = ['Qrscan'];
var jsx = [];

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {target: };
        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 (
            

                
                

                    
                    
                
            
        )
    }
}

class Qrscan extends React.Component {
    render() {
        return (
            
test
        )
    }
}

//elements
class Header extends React.Component {
    render () {
        return (
            

                
Jukey
            
        )
    }
}

class But extends React.Component {
    getInfo () {
        for (var i = 0; i  App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}
        )
    }
}

render (, document.getElementById('app'));

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

ES6类声明未被提升.

在您定义的第二行中var jsx = [];,该元素实际上是undefined.当我打印出jsx数组的内容时,我得到:

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

所以,你只需要的是转变jsx数组声明后您的组件声明.

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

var pages = ['Qrscan'];

//Rendering
class Menu extends React.Component {
    render() {
        return (
            

                
                

                    
                    
                
            
        )
    }
}

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {target: };
        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 (
            
test
        )
    }
}

var jsx = [];

//elements
class Header extends React.Component {
    render () {
        return (
            

                
Jukey
            
        )
    }
}

class But extends React.Component {
    getInfo () {
        for (var i = 0; i  App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}
        )
    }
}

ReactDOM.render (, document.getElementById('app'));