基本反应组件不渲染答案

【问题标题】：Basic react component not rendering基本反应组件不渲染
【发布时间】：2017-05-05 03:25:17
【问题描述】：

我正在使用 spring boot，我的 index.html 位于 src/main/resources/templates 目录中，下面是内容。如果我从 html 本身呈现静态内容，它会呈现，但是当我尝试从反应组件呈现时，它不会呈现任何内容

<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>ReactJS + Spring Data REST</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="react"></div>
    <script src="built/bundle.js"></script>
</body>
</html>

我的 react 组件在 src/main/js/ 目录和 app.js 文件中以下是我在 app.js 文件中的所有代码

import React from 'react';
import {render} from 'react-dom';
import RendorTest from 'components/RendorTest';
class RendorTest extends React.component{
    rendor(){
        return(
            <div><h1>Spring Boot + Rest + React.js</h1></div>
        );
    }
}
var element = <RendorTest />;
ReactDOM.render(
        element,document.getElementById('react')
    )

【问题讨论】：

rendor() 是那个拼写错误吗？
将rendor 更改为render

标签： reactjs spring-boot

【解决方案1】：

我不确定你为什么要导入 RendorTest 然后声明另一个同名的类，但你也在 React 对象上扩展了错误的方法。你需要extend React.Component { } 而不是.component。

你也可以import React, { Component } from "react"; 然后extend Component { }

正如ahutch所说，你还需要调用render()方法，rendor()不是React.Component的方法。

【讨论】：

【解决方案2】：

Kyle 是对的，您也想致电 render() 而不是 rendor()。这个组件也可能最好写成无状态的函数式组件，例如：

const RendorTest = (props) => { 
    return (
      <div>
        <h1>Spring Boot + Rest + React.js</h1>
      </div>
     )
}

【讨论】：