単純なコンポーネントを描画しないで反応しない

私はこのように質問に反応するのは新しいです。基本的なReactコンポーネントをレンダリングしようとしています。これは、これは私のindex.js単純なコンポーネントを描画しないで反応しない

import React from 'react'; 
import 'babel-polyfill'; 
import { render } from 'react-dom'; 
import './styles/style.css'; 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Layout from './components/Layout'; 

React.render(<Layout />, document.getElementById("root"));

である私のindex.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>React</title> 
    </head> 
    <body> 

    <div id="root"></div> 
    <script src="/bundle.js"></script> 
    </body> 
</html>

である。これは私のレイアウトコンポーネントです。

import React from 'react'; 
import {render } from 'react-dom'; 

class Layout extends React.Component{ 
    render(){ 
    return(
     <div className="container-fluid"> 
     <div className="jumbotron"> 
      <h1>This is home now</h1> 
     </div> 
     </div> 
    ); 
    } 
} 
export default Layout;

これは私がコンソールに表示されるエラー、

Uncaught TypeError: _react2.default.render is not a function

私はdevのサーバーを起動すると、私はレンダリングされたばかりで何もない空白のページを参照してくださいです。どんな助けもありがたい。

出典

2016-10-26 Anonymous

ページを読み込むときに何かが表示されますか？警告/エラー – finalfreq

'レンダリング（、document.getElementById（" root "））; ' –

このバンドルを使用しているのは何ですか？ – Sandro

index-j内のrender関数をreact-domからインポートする方法は、あなたがそれを呼び出す方法を変更します。

import { render } from 'react-dom';

ここでは、react-domオブジェクトからレンダリングメソッドをインポートするだけです。だからそれを使用すると言うでしょう

render(<Layout />, document.getElementById("root"));

出典

2016-10-26 21:18:11

可能性のある混乱に対処することをお勧めします。コンポーネント内の 'render'は' ReactDOM.render'ではなく、実際にDOMにレンダリングするためには使用されません - それはReactDOM.render'のためのものです – Li357

@AndrewLi index.jsファイルのインポートを参照しています。 –

を指定して編集しましたが、コンポーネントでreact-domのインポートは必要ないと言えます。それは混乱の原因かもしれません – Li357

単純なコンポーネントを描画しないで反応しない

答えて

関連する問題