如何解构包含函数的对象?

问题描述 投票:2回答:2

我有以下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未定义,当我点击按钮时,现在没有任何事情发生,但我没有得到错误,但我相信我正在调用一个空函数。这是正确的还是有更好的方法来构造一个包含函数且可能未定义的对象?

javascript reactjs ecmascript-6 destructuring
2个回答
1
投票

这是正确的,你可以这样写:

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

或者,如果它是假的,则根本不附加处理程序:

const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...

0
投票

您可以将一些代码移动到单独的函数中:

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>
            )

        }   

    }
© www.soinside.com 2019 - 2024. All rights reserved.