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中不会呈现

2 个答案: