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