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。为什么要对计数使用{}，但为什么下一行在计数{}上不使用return counts === 0 ? 'Zero' : counts呢？

Answer 1

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

const counts = this.state.counts;

return counts === 0 ? 'Zero' : counts是ternary operator的用法，例如代替诸如此类的if / else语句：

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

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

1 个答案: