简单组件未呈现：React js答案

【问题标题】：Simple Component is not rendering: React js简单组件未呈现：React js
【发布时间】：2017-06-25 21:29:02
【问题描述】：

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

有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

代替reactTest 使用这个：ReactTest 它会起作用。

根据DOC：

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

当一个元素类型以小写字母开头时，它指的是一个内置组件，如 <div> 或 <span> 并生成字符串 'div' 或“跨度”传递给React.createElement。以 a 开头的类型像<Foo /> 这样的大写字母编译为React.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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

会工作，但是

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

不会工作

【讨论】：