Как деструктурировать объект, содержащий функции? - PullRequest
Новая
       7

Как деструктурировать объект, содержащий функции?

2 голосов
/ 12 апреля 2019

У меня есть следующий компонент React: 

import { AppInterface } from 'pages/_app'

export default class SiteNavBtn extends React.Component {

    static contextType = AppInterface

    render() {

        const { actions } = this.context 
        const { toggleSiteNav } = actions || {}

        return(
            <button className="site-nav-btn" onClick={ () => toggleSiteNav() }>
                <i className="icon"><span>Open menu</span></i>
            </button>
        )

    }   

}

Если в приведенном выше коде значение this.context не определено, и я нажимаю на кнопку, появляется сообщение об ошибке, что toggleSiteNav не является функцией (так какожидается), поэтому я установил для нее пустую функцию в качестве значения по умолчанию: 

const { actions } = this.context 
const { toggleSiteNav = () => {} } = actions || {}

Это работает, это означает, что если this.context не определено, то когда я нажимаю на кнопку, ничего не происходит, конечно, ноЯ не получаю сообщение об ошибке, однако я считаю, что я вызываю пустую функцию.Это правильно или есть лучший способ деструктурировать объект, который содержит функции и который может быть неопределенным?

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Это правильно, однако вы можете написать это так: 

const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...

Или просто не прикреплять обработчик, если он ложный: 

const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...
0 голосов
/ 12 апреля 2019

Вы можете переместить часть своего кода в отдельную функцию: 

import { AppInterface } from 'pages/_app'

 export default class SiteNavBtn extends React.Component {

        static contextType = AppInterface

        toggleSiteNav(){
             const { actions } = this.context 
             const { toggleSiteNav } = actions || {};
             if(typeof toggleSiteNav === 'function'){
                   toggleSiteNav ();
             }

        }


        render() {

            return(
                <button className="site-nav-btn" onClick={ () => this.toggleSiteNav() }>
                    <i className="icon"><span>Open menu</span></i>
                </button>
            )

        }   

    }
...