React

Question

を使用して別のファイルからクラスをインポートしようとすると、空白の画面が表示されるのですが、私はReactフレームワークの新機能ですから、デバッグに問題が発生しています。

私のプロジェクトの別のファイルの別のコンポーネントからクラスを自分のapp.jsにインポートしようとしています。このクラスは今は何もしませんが、ページに "My Projects"というテキストを表示します。

<Projects/>を使用してapp.jsでインスタンス化すると、app.js（My App）のテキストが空白の画面に表示されます。

私は次の行に "My App"と "My Projects"というテキストを表示することを期待しています。私は何が欠けていますか？ここで

はapp.jsです：

import React, { Component } from 'react'; 
import Projects from './Components/Projects'; 
import './App.css'; 

class App extends Component { 
render() { 
    return (
    <div className="App"> 
    My App 
    <Projects/> 
    </div> 
    ); 
    } 
} 

export default App; 

そして、ここではProjects.jsです：ここでは

import React, { Component } from 'react'; 

class Projects extends Component { 
    render() { 
    return (
     <div className="Projects"> 
     My Projects 
     </div> 
    ); 
    } 
} 

export default Projects; 

はDEVコンソールからのエラーです：

invariant.js:44 Uncaught Error: Invalid tag: data:application/octet-stream;base64,aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IG…MKICAgICAgPC9kaXY+IAogICAgKTsKICB9Cn0KZXhwb3J0IGRlZmF1bHQgUHJvamVjdHM7Cg== 
at invariant (invariant.js:44) 
at validateDangerousTag (ReactDOMComponent.js:345) 
at new ReactDOMComponent (ReactDOMComponent.js:372) 
at Object.createInternalComponent (ReactHostComponent.js:41) 
at instantiateReactComponent (instantiateReactComponent.js:79) 
at instantiateChild (ReactChildReconciler.js:44) 
at ReactChildReconciler.js:71 
at traverseAllChildrenImpl (traverseAllChildren.js:77) 
at traverseAllChildrenImpl (traverseAllChildren.js:93) 
at traverseAllChildren (traverseAllChildren.js:172) 

そしてここに製品構造のイメージがあります：

http://imgur.com/a/BKTK3

Answer 1

あなたは.js拡張子のないファイルでProjectsコンポーネントのコードを保存しているので、それがテキストファイルとしてロードされました。テキストは小文字のdata:application...で始まるので、無効な名前のカスタム要素として扱われるため、Invalid tagというエラーが発生します。