将静态HTML抽象为React组件遇渲染失败问题求助

嘿，我帮你找出了几个导致组件没显示的关键问题，一个个来解决：

1. 最核心的问题：没引入React依赖 #

浏览器根本不知道React.createClass和ReactDOM.render是什么！你得先把React和ReactDOM的库引入页面，不然所有React相关代码都是无效的。如果是用CDN的话，直接在<head>里加对应的脚本就行。

2. 两处类名拼写错误 #

• 你把原本HTML里的navbar-header写成了navbar-healer，虽然这不会直接导致组件不渲染，但会让样式乱掉；
• 按钮的类名ban-default是笔误，应该是btn-default，这个也是样式问题，但还是得修正。

3. 脚本执行顺序的坑 #

如果你的脚本放在页面顶部，可能#header元素还没加载出来，document.querySelector('#header')就找不到目标节点了。最好把脚本放在</body>标签之前，或者等DOM加载完成后再执行渲染代码。

修正后的完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <!-- 先引入React、ReactDOM和Babel（处理JSX） -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  <!-- 如果用Bootstrap的话，记得引入它的CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- 目标容器要先于脚本存在 -->
  <div id="header"></div>

  <!-- 脚本类型要设为text/babel，让Babel转译JSX -->
  <script type="text/babel">
    var HeaderComponent = React.createClass({
      render: function() {
        return (
          <nav className="navbar navbar-inverse">
            <div className="container-fluid">
              <!-- 修正navbar-header的拼写 -->
              <span className="navbar-brand navbar-header">name</span>
              <ul className="nav navbar-nav">
              </ul>
              <div className="clearfix" id="Avatar">
                <p id="displayName"></p>
                <img src="" id="photo"/>
                <!-- 修正按钮类名 -->
                <button id="firebaseui-auth-container" className="btn btn-default">prop</button>
              </div>
            </div>
          </nav>
        )
      }
    })

    ReactDOM.render(<HeaderComponent />, document.querySelector('#header'))
  </script>
</body>
</html>

额外小提示 #

• 因为你用了JSX语法（在JS里直接写HTML标签），所以必须引入Babel来转译，不然浏览器认不出这些代码；
• 要是你用的是React 16及以上版本，React.createClass已经被淘汰了，更推荐用函数组件或者ES6类组件，比如函数组件写法：

function HeaderComponent() {
  return (
    // 这里放之前的JSX内容就行
  )
}

• 以后遇到React渲染问题，第一时间打开浏览器控制台（F12），里面会有具体的错误提示，比瞎猜管用多啦！

内容的提问来源于stack exchange，提问作者Kyle Wade