React - Uncaught Invariant Violation：

ブラウザでコードを実行すると、このエラーメッセージが表示されます。React - Uncaught Invariant Violation：

キャッチされない不変違反：MyComponent.render（）：有効に要素（またはnull）が返されなければならないが反応します。定義されていないが配列などの無効なオブジェクトを返した可能性があります。

私は自分のコードエディタとしてAtomを使用しており、クロムウェブサーバ上で動作しています。ここに私のコードです。

<body> 
<div id="react-comp"></div> 
    <script type="text/babel"> 
    var MyComponent = React.createClass({ 
     render: function() { 
     return 
      <div> 
      <h1>{this.props.text}</h1> 

      </div>; 
     } 
    }); 

    ReactDOM.render(
     <div> 
     <MyComponent text="Hello World"/> 
     <MyComponent text="Hello"/> 
     </div> 
    , document.getElementById('react-comp')); 


    </script> 
</body>

jsx変換に関する問題がありますか？または他の何か？

出典

2016-06-17 MrWeb

完全版のエラーメッセージを表示するには、非縮小バージョンを使用できます。 – Jack

@Jack今、完全なエラーメッセージが表示されます。説明が更新されました。 – MrWeb

returnの後にJavaScriptセミコロンを挿入する可能性があります。あなたのdivの前に改行を削除するだけです。

var MyComponent = React.createClass({ 
    render: function() { 
    return <div> // Change this line 
     <h1>{this.props.text}</h1> 

     </div>; 
    } 
});

出典

2016-06-17 17:14:47

今は問題ありません。詳細な答えをありがとう:) – MrWeb

ちょうど

var MyComponent = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>{this.props.text}</h1>  
     </div> 
    ); 
    } 
});

ダニエルの提案にあなたのレンダリング機能を変更することも正しいです。

出典

2016-06-17 17:15:25 Chris

使用しているReactのバージョンがわかりません.JSXの構文が（）で囲まれていないと古いバージョンでエラーが発生することがわかっています。 MyComponentのレンダリングメソッドでこれを行うようにしてください。

render: function() { 
    return (
     <div> 
     <h1>{this.props.text}</h1> 
     </div> 
    ); 
    }

出典

2016-06-17 17:15:55 modernator

React - Uncaught Invariant Violation：

答えて

関連する問題