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 预处理器来修复它。

Answer 2

您可以尝试使用此代码来使计数器同时使用递增计数和递减计数。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count :0
    };
    this.increment=this.increment.bind(this);
    this.decrement=this.decrement.bind(this);
  }
increment(){
  this.setState({count:this.state.count+1});
}
decrement(){
  this.setState({count:this.state.count-1});
}
  render () {
    return (
      <div id="counter">
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <div>
          {this.state.count}
        </div>
      </div>
    );
  }
}


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

只需定义函数并使用 onClick() 触发它们。

这是使用您的代码在 codepen 中运行的计数器，对其进行了一些修改以使其运行。 https://codepen.io/coderakki/pen/QOQqMP?editors=0010

更新：另外，您需要在组件的状态中定义计数。

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

React.js won't render in my Codepen

javascript

reactjs

codepen