小编典典

在React Js上需要帮助

reactjs

我是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”。


阅读 249

收藏
2020-07-22

共1个答案

小编典典

React类必须始终以大写字母开头:

var MyComponent = react.createClass({

读取用户定义的组件必须大写

2020-07-22