使用React Factory创建的组件未渲染，请求排查问题

嘿，我帮你梳理下导致页面空白的问题哈～首先看你贴的代码，最显眼的问题就是React DOM的脚本链接没写完，你写的是<script src="https://unpkg.com/re...">，这会导致浏览器加载不了ReactDOM库，而React组件最终得靠它才能渲染到页面容器里，没这个库肯定出不来内容。

接下来我给你补全完整的可运行代码，同时列几个常见的坑：

1. 先补全依赖脚本 #

React 15.4.2对应的完整ReactDOM链接应该是这样的，要和React库一起加载：

<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>

2. 完整的React工厂组件示例 #

假设你想用React的工厂方法（也就是React.createClass，React 15还支持这个写法）创建组件，完整可运行的代码应该是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pure React Samples</title>
</head>
<body>
    <!-- 挂载组件的容器 -->
    <div id="react-container"></div>

    <!-- 先加载React和ReactDOM库 -->
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>

    <script>
        // 用React工厂方法创建组件
        const MyComponent = React.createClass({
            render: function() {
                // 返回要渲染的React元素
                return React.createElement('h1', null, 'Hello React!');
            }
        });

        // 把组件渲染到页面的容器里
        ReactDOM.render(
            React.createElement(MyComponent),
            document.getElementById('react-container')
        );
    </script>
</body>
</html>

3. 其他容易踩的坑 #

• 漏了ReactDOM.render调用：光创建组件不行，必须把它挂载到页面的容器元素里，不然组件不会出现在页面上。
• render方法返回值不对：render方法必须返回有效的React元素（或者null），要是返回undefined或者其他无效内容，页面也会是空白。
• 脚本加载顺序错了：得先加载React和ReactDOM，再写你的组件代码，不然会报错React is not defined，组件自然渲染不了。

你可以对照上面的示例检查自己的代码，先把ReactDOM的链接补全，再确认渲染逻辑有没有问题～

内容的提问来源于stack exchange，提问作者Krishnan Ravikumar