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"));

React不渲染简单组件

1 个答案: