Как работает приведенная ниже функция React JS code formatCount? - PullRequest
Новая
       18

Как работает приведенная ниже функция React JS code formatCount?

1 голос
/ 28 марта 2019

Я изучаю 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?

1 Ответ

1 голос
/ 28 марта 2019

const {counts} = this.state; называется деструктуризацией объекта и, по сути, является более коротким способом написания этого: 

const counts = this.state.counts;

return counts === 0 ? 'Zero' : counts является использованием троичного оператора и может, например, использовать вместо операторов if / else, подобных этому: 

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