元素类型无效:需要字符串(用于内置组件)或类/函数反应错误。
元素类型无效:需要字符串(用于内置组件)或类/函数反应错误。
提问于 2017-06-09 01:11:05
当我试图通过控制台提供的按钮(但)更改页面时，我在React上遇到了问题：
元素类型无效:需要一个字符串(用于内置组件)或>一个类/函数(用于组合组件)，但got: un定义。您>可能忘记从定义在其中的文件中导出组件。
但是，当我将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'));谢谢你抽出时间来帮助我解决问题！
Stack Overflow用户
回答已采纳
发布于 2017-06-09 02:31:29
ES6类声明是未吊起。
在定义var jsx = [<Qrscan />];的第二行中，该元素实际上是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 (
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44447795
复制相关文章
相似问题
腾讯云开发者
