reactjs - 学习 React：为什么我们不必在第 18 行使用 this.state.count 来访问计数，但我们必须在第 12 行使用 this.state.imageUrl？

Question

如果我在第 18 行执行 this.state.count，我不确定为什么输出会消失。将不胜感激

  export default class Counter extends Component {
  state = {
    count: 0,
    imageUrl: "https://picsum.photos/200"
  };

  render() {
    return (
      <div>
    <img src={this.state.imageUrl} alt="" />
    <span>{this.formatCount()}</span>
        <button>Increment</button>
      </div>
    );
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

标签： reactjsjsx

Answer 1

当你这样做时：

const { count } = this.state;

你从 中提取count，this.state这叫做解构

你也可以这样：

formatCount() {
    return this.state.count === 0 ? "Zero" : this.state.count;
}