React js：为什么html没有渲染？
我试图在Web浏览器中运行此代码，但它显示一个空白页面。你能解释为什么在网页浏览器中打开时html不显示吗？我哪里错了？感谢React js：为什么html没有渲染？
<DOCTYPE! html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library -->
\t \t <title>My react page</title>
\t </head>
\t <body>
\t \t <div id="content"></div>
\t \t
\t \t <script type="text/jsx">
\t \t \t
\t \t \t var myComponent = React.createClass({
\t \t \t \t //component classes must have a render function that returns some HTML
\t \t \t \t render: function() {
\t \t \t \t \t return(
\t \t \t \t \t \t <h2>This is a core component</h2>
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t React.render(<myComponent />, document.getElementById('content'));
\t \t </script>
\t \t
\t </body>
</html>
正如@Hugo多佐伊斯说。 React使用小写字母开头的名称编译组件，就好像它们是HTML元素一样。
React.createElement("myAnotherComponent", null)
您可以使用开发工具运行代码片段来查看生成的代码。无论如何，你不应该使用JSXTransformer作为警告说。
<DOCTYPE! html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
\t \t <title>My react page</title>
\t </head>
\t <body>
\t \t <div id="content"></div>
\t \t
\t \t <script type="text/jsx">
var myAnotherComponent = React.createClass({
render: function() {
throw new Error('Never actually called');
return (<span>test</span>)
}
});
\t \t \t
\t \t \t var MyComponent = React.createClass({
\t \t \t \t render: function() {
console.log('Render MyComponent');
debugger;
\t \t \t \t \t return (<h2>This is a core component <myAnotherComponent /></h2>);
\t \t \t \t }
\t \t \t });
\t \t \t React.render(<MyComponent />, document.getElementById('content'));
\t \t </script>
\t \t
\t </body>
</html>据我所知，这不是一个错误，是由设计。 –
@HugoDozois可能会。 –
如果他们没有这样做，你将不得不保留所有可能的html5标签的清单...其中包括完全自定义的标签，所以它基本上是不可能的。这样，所有小写字母都按原样呈现给dom，大写字母是用户定义的组件。（Im试图找回源代码） –
您所遇到的问题是组件myComponent的情况。
阵营文档状态：
要渲染的HTML标签，只是在JSX使用小写标签名称：
要呈现一个阵营组件，只需创建与上启动一个本地变量 - 案例信：
你可以在这里阅读更多：https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components
因此，要解决您的问题，只是ç但是，要同意其他人的看法，放弃JSX Transformer并使用更新的JSX编译器转换为常规JS的方法会更明智一些。有很多方法可以做到这一点：Gulp，Webpack等......只是找到最适合你的方法！
<DOCTYPE! html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library -->
\t \t <title>My react page</title>
\t </head>
\t <body>
\t \t <div id="content"></div>
\t \t
\t \t <script type="text/jsx">
\t \t \t
\t \t \t var MyComponent = React.createClass({
\t \t \t \t //component classes must have a render function that returns some HTML
\t \t \t \t render: function() {
\t \t \t \t \t return(
\t \t \t \t \t \t <h2>This is a core component</h2>
\t \t \t \t \t);
\t \t \t \t }
\t \t \t });
\t \t \t React.render(<MyComponent />, document.getElementById('content'));
\t \t </script>
\t \t
\t </body>
</html>谢谢贾斯汀。它现在有效 – Max
我相信你需要reactDOM因为你什么都没有读您的JSX对你现在做这个浏览器。另外我会建议使用更新的版本，如果你可以......至少15或14。如果你不想编译它，你也不必使用JSX。 – ajmajmajma
我已经包含这个链接https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js，但我仍然得到一个空白页 – Max
是的，这反应了反应15.3，在您的示例中，您目前正在使用0.13.3。您需要使用reactDOM本身和浏览器助手进行渲染。看看这个小提琴的反应，例如 - https://jsfiddle.net/reactjs/69z2wepo/。有反应，reactDOM，和一个反应-babel脚本的小提琴（transpile）。反应文档用示例解释了所有这些。你的问题是你需要读取和传输JSX。很多人喜欢在构建过程中使用babel。 – ajmajmajma