javascript - 下面的 React js 代码 formatCount 函数是如何工作的？

Question

我正在学习 React.js 并面临以下令人困惑的代码:

import React, { Component } from 'react';
class Counter extends Component {
    state = { 
        counts:1
     };
    render() { 
        return ( 
            <React.Fragment>
                <span>{this.formatCount()}</span>
                <button>Increment</button>
            </React.Fragment>
        );
    }
    formatCount(){
        const {counts} = this.state;
        return counts === 0 ? 'Zero' : counts
    }
}
export default Counter;

有几件事让我感到困惑:

1.state是一个对象而不是一个数字，但是在这行const {counts} = this.state;为什么要将一个对象赋值给一个数字？

2.为什么在计数上使用 {}，但在下一行，计数周围没有 {}， 返回计数 === 0？ “零”:计数？

Answer 1

const {counts} = this.state; 被称为 object destructuring本质上是一种更短的写法:

const counts = this.state.counts;

返回计数 === 0 ? 'Zero' : counts 是对 ternary operator 的使用并且可以例如用来代替像这样的 if/else 语句:

if (counts === 0) {
  return 'Zero';
} else {
  return counts;
}