在React Js上需要帮助

小编典典

在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”。

阅读 256

2020-07-22

共1个答案

小编典典

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

var MyComponent = react.createClass({

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

2020-07-22