反应不渲染简单组件

Question

我是React的新手，所以这个问题。 我正在尝试渲染一个基本的React组件。 这是我的index.html

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

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

这是我的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"));

这是我的布局组件。

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

启动开发服务器时，我看到一个空白页面，没有呈现任何内容。 任何帮助表示赞赏。

Answer 1

从react-dom导入index.js内的render函数的方式会更改调用它的方式。

import { render } from 'react-dom';

在这里，您只需从react-dom对象导入render方法。 所以要使用它，你会说

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

反应不渲染简单组件

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-26 21:18:11

反应不渲染简单组件

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-26 21:18:11

解决方案1
2 已采纳 2016-10-26 21:18:11