我有以下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
未定义,当我单击按钮时,现在当然什么也没发生,但是我没有收到错误,但是我相信我正在调用一个空函数。这是正确的还是有更好的方法来分解包含函数且可能未定义的对象?
答案 0 :(得分:1)
那是正确的,但是您可以这样写:
const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...
或者如果错误处理程序,则不附加该处理程序:
const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...
答案 1 :(得分: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>
)
}
}