javascript - React.js 不会在我的 Codepen 中呈现

Question

我正在尝试创建一个计数器，但无法将渲染中的内容显示在页面上。

这是我在 Codepen 中的 JS 代码(在外部 JS 中添加了 React 和 ReactDOM)

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
    };
    this.flash = "";
    this.count = 0;
  }

  componentWillReceiveProps(nextProps) {
    var newValue = nextProps.count;
    if (this.count !== newValue) {
      this.flash = this.flash === "flash1" ? "flash2" : "flash1";
    }
  }

  render () {
    return (
      <div id="counter">
        <button>+</button>
        <button>-</button>
        <div id="count" className={this.flash}>
          {this.count}
        </div>
      </div>
    );
  };
}


ReactDOM.render(<Counter />, document.getElementById('countContainer'));

我可以在我的 JS 代码中看到，Codepen 中的颜色通常应该是棕色，所以我显然错过了一些东西(目前是黄色)。

在我的 HTML 中，我有以下内容

<div id="countContainer">
</div>

注意:我还没有完成代码的最终功能。我想在继续之前我应该​​尝试让它在页面上呈现。

我的代码笔是:URL

Answer 1

我尝试了这个，但在第一个 JSX 标记位于 render() 内部的行处出现错误。除了 React 和 ReactDOM 之外，我还添加了 Babel 预处理器来修复这个问题。