要素タイプが無効：文字列（組み込みコンポーネント用）またはクラス/関数が必要です。React Error

Question

ボタンを使用してページを変更しようとしたときに問題が発生しました（ただし、コンソールに表示されます）

要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要ですが、未定義です。あなたは>おそらく

。それはで定義されていたファイルからコンポーネントをエクスポートするのを忘れしかし、私はクラスコードに 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')); 

私の問題を手伝ってくれてありがとう！

Answer 1

ES6クラス宣言はnot hoistedです。

var jsx = [<Qrscan />];を定義したときの2行目で、その要素は実際にはundefinedです。私はjsx配列の内容を印刷するとき、私は得る：

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

だからあなたは、単にあなたの<Qrscan>コンポーネント宣言の後への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>