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
是未定义的,我点击按钮,一个错误抱怨toggleSiteNav
不是一个函数(如预期的那样),所以我设置了一个空函数作为它的默认值:
const { actions } = this.context
const { toggleSiteNav = () => {} } = actions || {}
这有效,这意味着如果this.context
未定义,当我现在单击按钮时,当然什么也没有发生,但我没有收到错误,但是我相信我正在调用一个空函数。这是正确的还是有更好的方法来解构包含函数且可能未定义的对象?
解决方案
这是正确的,但是你可以这样写:
const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...
或者如果它是虚假的,则根本不附加处理程序:
const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...
推荐阅读
- angular - How to solve the error: Failed: Error while waiting for Protractor to sync with the page
- java - 如何手动触发对象的自定义注释验证规则?
- sql-server - 如何查找与另一列中的 itemA 链接的项目列是否在特定列中具有特定值?
- java - Spring Root Context 创建了两次
- c# - 如何修复“错误 CS0009:元数据文件“System.Xml.dll”无法打开——图像太小”?
- java - java类继承练习
- amazon-web-services - AWS Lambda 是否复制每条消息?
- node.js - 为什么“每 1 分钟”是我可以使用 later.js 的唯一时间表?
- html - 如何为包含选定单词的列添加图形标记?
- jquery - Twitter 的 Bootstrap 4 - ComboBox 更改项目的行高