Reactjs：組件不渲染

這是令人尷尬的，但我失去了時間試圖找出爲什麼reactjs組件不呈現。Reactjs：組件不渲染

下面是代碼我目前：

// index.html 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Ulonka Frontend</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script> 
    </body> 
</html>

在routes.js

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, browserHistory, IndexRoute } from 'react-router' 
import App from './App' 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
    </Route> 
</Router> 
), document.getElementById('app'))

在App.js

import React from 'react' 
export default React.createClass({ 
    render() { 
    return <div> <h1> Hello </h1> </div> 
    } 
})

在開發工具

經過源，並且可以看到字符串 '你好'在bundle.js中，但由於某種原因它不會在瀏覽器中顯示。

有人可以請我解釋我失蹤了什麼？將不勝感激幫助。謝謝！

來源

2016-06-10 Uzzar

您是否嘗試過在沒有'react-route'的情況下渲染它？ –

'text/javascript'是JS的錯誤mimetype，它是根據規範的'application/javascript'。由於沒有任何理智的瀏覽器支持JS以外的語言，因此HTML5聲稱爲了這個目的使用'

~~您在App.js中使用了錯誤的語法：您要導出的類沒有名稱。~~

所以App.js應該是

import React from 'react' const Hello = React.createClass({ render() { return <div> <h1> Hello </h1> </div> } }) export default Hello;

，或者ES6版本，

import React from 'react' class Hello extends React.Component({ render() { return <div> <h1> Hello </h1> </div> } }) export default Hello;

~~檢查，例如：https://toddmotto.com/react-create-class-versus-component/~~

你的路線可能是錯誤的。您的代碼無需使用react-router。 ~~好吧，不完全是這樣的：它在應用正確的語法之後起作用。~~檢查the fiddle。

另外，是routes.js和App.js在同一個目錄下嗎？

來源

2016-06-10 11:00:52

我也注意到了這一點，但顯然你可以有一個沒有名字的「默認」組件。雖然不確定;不要在此引用我的意思。 – Chris

@克里斯有趣。你能證明這個[工作小提琴]（https://jsfiddle.net/69z2wepo/45129/）嗎？ –

不，但看看這[接受的答案]（http://stackoverflow.com/a/34841313/2030321） – Chris

render方法已被移動到反應包。試試這個

進口反應，從{}渲染 '反應'

來源

2016-06-10 11:00:59 siwymilek

這是沒有必要的，因爲你正在導入整個包。 – Chris

相關問題