我有以下 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 ?
最佳答案
没错,但是你可以这样写:
const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...
或者如果处理程序是假的,则不附加处理程序:
const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...
关于javascript - 如何解构包含函数的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55647081/