Question

这很令人尴尬，但我正在浪费时间试图弄清楚为什么一个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>
  } 
})

检查开发工具中的来源，可以看到字符串＆＃39; Hello＆＃39;在bundle.js但由于某种原因它不会在浏览器中显示。

有人可以向我解释一下我错过了什么吗？非常感谢帮助。谢谢！

Answer 1

@Ursus，@ polkovnikov.ph，@ TheReason！

忘记起诉我弄清楚我的错误是什么。

我的错误是将应用程序的根组件（App.js）设置为App的入口点（index.js）。一旦错误得到纠正，App.js就会呈现给DOM。

感谢所有人;非常感谢。

Answer 2

~~您在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在同一目录中吗？

Answer 3

render方法已被移动以对包进行反应。试试这个

从'react'
导入React，{render}

Reactjs：组件不呈现

3 个答案: