React JS：為什么HTML無法呈現？

Question

我試圖在Web瀏覽器中運行此代碼，但是它顯示空白頁。 您能解釋一下為什么在Web瀏覽器中打開html時不渲染嗎？ 我要去哪里錯了？ 謝謝

  <DOCTYPE! html> <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library --> <title>My react page</title> </head> <body> <div id="content"></div> <script type="text/jsx"> var myComponent = React.createClass({ //component classes must have a render function that returns some HTML render: function() { return( <h2>This is a core component</h2> ); } }); React.render(<myComponent />, document.getElementById('content')); </script> </body> </html>

Answer 1

正如@Hugo Dozois所說。 React編譯名稱以小寫字母開頭的組件，就像它們是HTML元素一樣。

React.createElement("myAnotherComponent", null)

您可以使用開發工具運行代碼段以查看生成的代碼。 無論如何，您不應像警告中所述在生產中使用JSXTransformer 。

  <DOCTYPE! html> <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax--> <title>My react page</title> </head> <body> <div id="content"></div> <script type="text/jsx"> var myAnotherComponent = React.createClass({ render: function() { throw new Error('Never actually called'); return (<span>test</span>) } }); var MyComponent = React.createClass({ render: function() { console.log('Render MyComponent'); debugger; return (<h2>This is a core component <myAnotherComponent /></h2>); } }); React.render(<MyComponent />, document.getElementById('content')); </script> </body> </html>

Answer 2

您遇到的問題是組件myComponent的情況。

React文檔狀態：

要呈現HTML標簽，只需在JSX中使用小寫標簽名稱：

要渲染React組件，只需創建一個以大寫字母開頭的局部變量：

您可以在此處了解更多信息： https : //facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

因此，要解決您的問題，只需將名稱從myComponent更改為MyComponent

但是，要與其他所有人達成共識，最好放下JSX Transformer並采用將JSX編譯為常規JS的更新方法。 有很多方法可以做到這一點：Gulp，Webpack等...只要找到最適合您的方法！

  <DOCTYPE! html> <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library --> <title>My react page</title> </head> <body> <div id="content"></div> <script type="text/jsx"> var MyComponent = React.createClass({ //component classes must have a render function that returns some HTML render: function() { return( <h2>This is a core component</h2> ); } }); React.render(<MyComponent />, document.getElementById('content')); </script> </body> </html>

React JS：為什么HTML無法呈現？

問題描述

2 個解決方案

解決方案1
2 2016-08-02 15:53:30

解決方案2
0 2016-08-02 16:18:26

React JS：為什么HTML無法呈現？

問題描述

2 個解決方案

解決方案1 2 2016-08-02 15:53:30

解決方案2 0 2016-08-02 16:18:26

解決方案1
2 2016-08-02 15:53:30

解決方案2
0 2016-08-02 16:18:26