基本反應組件不渲染

我使用的是spring引導，我的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>

我的反應成分在src /主/ 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') 
    )

來源

2017-05-05 enthusiast_coder

rendor（）是那個錯字？ – SaJed

將'rendor'改爲'render' – Hannan

我不知道爲什麼你要導入RendorTest然後宣佈另一個類同名，但你也延長了錯誤方法在React對象上。您需要extend React.Component { }而不是.component。

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

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

來源

2017-05-05 04:20:34

謝謝！你剛剛解決了我的問題。 –

非常歡迎！ –

凱爾是正確的，你也想撥打render()而不是rendor()。這個組件也可能更好地寫成無狀態功能組件，例如： const RendorTest = (props) => { return ( <div> <h1>Spring Boot + Rest + React.js</h1> </div> ) }

來源

2017-05-05 04:50:18 ahutch

基本反應組件不渲染

回答

相關問題