我是React Js的新手,我的代码无法正常工作。请在下面看看:
这是我的脚本文件 Main.jsx 。该文件由react编译,输出放在’dist’文件夹下的main.js文件中。
var react = require("react"), reactDom = require("react-dom"); var myComponent = react.createClass({ render: function () { return <div><h4>I am rendered by react.</h4></div>; } }); reactDom.render(<myComponent />, document.getElementById("basicDiv"));
它是 Index.html
<html> <head> <base href="./" /> <title>App title</title> <script src="node_modules/react/dist/react.js"></script> <script src="node_modules/react/dist/react-with-addons.js"></script> <script src="node_modules/react-dom/dist/react-dom.js"></script> </head> <body> <div id="basicDiv"></div> <!-- React compiled code is in dist folder and is accessible --> <script src="dist/main.js"></script> </body> </html>
当我在浏览器中运行index.html文件时, 输出为 空白屏幕。请查看以下chrome开发工具检查器窗口的屏幕截图:
“ myComponent”的内容未在浏览器中呈现。我看过许多使用相同代码的教程,但是它不起作用…不知道为什么。
请对此提供帮助,如果可能,还请提供一些示例代码/最新发行版的教程。提前致谢
更新资料
请注意,我在HTML文件中包含了React库引用,这使我可以在将React导入脚本文件时自由地使用“ React”或“ react”作为变量名。在这种情况下,此处不必强制使用“ React”(大写R)作为变量名。
最终更新
因此,解决方案(由Damien Leroux回答)是使react组件的名称以大写字母开头。“ var myComponent”必须为“ var MyComponent”或“ var Mycomponent”。
React类必须始终以大写字母开头:
var MyComponent = react.createClass({
读取用户定义的组件必须大写