React不是渲染简单的组件

React not rendering simple component

本文关键字：简单 组件 React      更新时间：2023-09-26

我是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

当我启动开发服务器时，我看到一个空白页面，没有呈现任何内容。

在index.js中从react-dom导入渲染函数的方式会改变调用它的方式。

import { render } from 'react-dom';

这里你只需要从react-dom对象中导入渲染方法。所以要使用

render(<Layout />, document.getElementById("root"));
相关文章：