Question

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

<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')
    )

Answer 1

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

您还可以import React, { Component } from "react";然后extend Component { }

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

Answer 2

Kyle是对的，您也想要致电render()而不是rendor()。该组件也可能更好地编写为无状态功能组件，例如： const RendorTest = (props) => { return ( <div> <h1>Spring Boot + Rest + React.js</h1> </div> ) }

基本反应组件无法渲染

2 个答案: