私の反応変数がDOM上でレンダリングされないのはなぜですか？

私はウェブサイトcreate-react 私の反応変数がDOM上でレンダリングされないのはなぜですか？

反応し、私は指示に従い、提供されApp.jsを編集し始めている反応学んでいますと、公式からこのgithubのリポジトリを使用しています。

私のApp.jsファイルでは、Todoクラスを作成し、それを#container idでレンダリングしています。私は、Webページを開くと

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="./src/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    <div id="container"></div> 
    </body> 
</html>

：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

ReactDOM.render(
    <Todo />, 
    document.getElementbyId('container') 
);

そして、ここではindex.htmlファイルである：ここでは

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

var Todo = React.createClass({ 
    render: function() { 
    return (
     <h1 className="todo">Hello</h1> 
    ); 
    } 
}); 

export default App;

がindex.jsファイルは次のとおりです。ここで

はApp.jsファイルですこのエラーが発生する21:5 warning 'Todo' is defined but never used no-unused-vars

ここでは何が起こっていますか？

出典

2016-09-05 Dan Rubio

あなたは（app.jsに）index.js

export const Todoにapp.jsと輸入TODOからTODOをエクスポートする必要があると思いますReactクラス）とAppコンポーネントが含まれています。中括弧とエクスポートする事が続くこの使用export行うには：

export { 
    Todo, 
    App 
};

をこれは、これは、パブリックおよびインポート可能になります。どちらも現在、別のファイルで使用できるようになりました。このようなインポート：

import { App, Todo } from './App';

エクスポートされたコンポーネントの両方がインポートされ、両方にアクセスできるようになります。次に、常にあなたのようにレンダリングしてください：

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

ReactDOM.render(
    <Todo />, 
    document.getElementbyId('container') 
);

出典

2016-09-05 05:41:17 Li357

Andrewに感謝します。これはついに私のために働いた。とても有難い！ –

ねえ、私はA（あなたがTodo変数をエクスポートする必要が

import Todo from "./app";(in index.js)

出典

2016-09-05 05:32:02

返信ありがとうございました。残念ながら、それは動作しませんでした。 'export const Todo;を追加するとエラーが出ました'構文エラー：予期しないトークン（29:17） ' –

これは、varをconstとしてエクスポートできないためです。明示的にエクスポートする必要があります。 @DanRubio – Li357

私の反応変数がDOM上でレンダリングされないのはなぜですか？

答えて

関連する問題