Javascript 如何分解包含函数的对象？

我有以下反应组件：

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

未定义，当我现在单击按钮时，当然不会发生任何事情，但我没有得到错误，但是我相信我调用的是一个空函数。这是正确的还是有更好的方法来分解包含函数且可能未定义的对象

您可以将部分代码移动到单独的函数：

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

        }   

    }

import{AppInterface}来自“pages/\u app”
导出默认类SiteNavBtn扩展React.Component{
静态contextType=AppInterface
toggleSiteNav（）{
const{actions}=this.context
const{toggleSiteNav}=actions | |{}；
if（toggleSiteNav的类型=='function'）{
toggleSiteNav（）；
}
}
render（）{
返回(
this.toggleSiteNav（）}>
打开菜单
)
}   
}

没错，但是您可以这样写：

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

const{actions:{toggleSiteNav=（）=>{}}={}}=this.context；
...
如果回调不存在，我个人不会注册事件。否则，我会做一个通用的回调来处理点击请求，并处理如果所需的回调不存在该怎么办。在这种情况下，你可以把
onClick={toggleSiteNav}
放进去。我觉得代码很好，正如前面提到的
onClick={（）=>toggleSiteNav（）}
可以写成
onClick={toggleSiteNav}
const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...

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