Question

我想使用下面的代码做出反应，但我没有得到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>

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

Answer 1

如果React Class name以lowercase字母开头，那么class内的方法就不会被调用，即没有渲染，并且您在浏览器控制台中没有收到任何错误消息，因为小写字母被视为HTML元素，所有React components必须以upper case字母开头，因此请始终使用大写字母。

而不是reactTest使用此代码：ReactTest它将起作用。

根据 DOC ：

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

当元素类型以小写字母开头时，它引用a   内置组件，如<div>或<span>，会产生字符串'div'   或'span'传递给React.createElement。以a开头的类型   大写字母如<Foo />编译为React.createElement(Foo)和   对应于JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果你有   以小写字母开头的组件，将其分配给a   在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>

Answer 2

以下工作正常，请尝试：

      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>

Answer 3

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

将起作用，但是

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

不起作用

简单组件未呈现：React js

3 个答案: