javascript - 如何解构包含函数的对象？

Question

我有以下 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 未定义，当我现在点击按钮时当然没有任何反应，但我没有收到错误，但我相信我正在调用一个空的功能。这是正确的还是有更好的方法来解构包含函数且可能 undefined object ？

Answer 1

没错，但是你可以这样写:

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

或者如果处理程序是假的，则不附加处理程序:

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