简单组件未呈现：React js

IT技术 javascript reactjs
2021-02-02 03:50:57

我正在尝试使用以下代码做出react，但我没有在浏览器中获取 html 元素。控制台中没有错误。

<!DOCTYPE html>
    <html>
    <head>
        <title>React without npm</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
    </head>
    <body>
    <div id="test"></div>
    <script type="text/babel">

        var reactTest = React.createClass({
            render: function(){
                return(
                    <h1>React Without NPM</h1>
                );
            }
        });

        ReactDOM.render(<reactTest />,document.getElementById('test'));
    </script>
    </body>
    </html>

有人可以帮忙解决这个问题。

3个回答

如果 ReactClass name以lowercase字母开头，则classget 中没有任何方法被调用，即没有任何 Renders，并且您不会在浏览器控制台中收到任何错误消息，因为小字母被视为HTML元素，因此所有React components必须以字母开头的规则upper case字母，所以总是使用大写。

而不是reactTest使用这个：ReactTest它会起作用。

根据DOC：

用户定义的组件必须大写。

当元素类型以小写字母开头时，它指的是内置组件，如<div>或<span>并导致传递给 的字符串“div”或“span” React.createElement。以大写字母开头的类型，如<Foo />compile toReact.createElement(Foo)并对应于在 JavaScript 文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在将其用于 JSX 之前将其分配给一个大写的变量。

检查工作代码：

<!DOCTYPE html>
<html>
    <head>
        <title>React without npm</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
    </head>
    <body>
    <div id="test"></div>
    <script type="text/babel">

        var ReactTest = React.createClass({
            render: function(){
                return(
                    <h1>React Without NPM</h1>
                );
            }
        });

        ReactDOM.render(<ReactTest />,document.getElementById('test'));
    </script>
    </body>
</html>

以下工作正常，试试吧：

      var ReactTest = React.createClass({
            render: function(){
                return(
                    <h1>React Without NPM</h1>
                );
            }
        });

        ReactDOM.render(<ReactTest />,document.getElementById('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="test" ></div>

const Some = ()=> <div />
<Some />

会工作，但是

const some = () => <div />
<some />

不会工作

其它你可能感兴趣的问题
上一篇CSS 转换未开始/未调用回调 下一篇如何在不使用具有下载属性或服务器的 <a> 元素的情况下下载文件？