我想卸载单个反应组件,该组件属于总共包含三个组件的父组件。父组件有这个渲染函数:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
<Home ref="home"/>
<Footer ref="footer"/>
</div>
),
handleNavbarClick: function () {
// remove Home
}
如果用户单击导航栏中的链接并且我想卸载主页组件,我该怎么做?看来我唯一的选择就是做这样的事情(取自React.js:删除组件 https://stackoverflow.com/questions/27227792/react-js-removing-a-component),但这看起来很恶心:
render: function () {
var home = this.state.remove_home ? null : <Home ref="home />
return (
<div className={classes}>
<Navbar ref="navbar"/>
{home}
<Footer ref="footer"/>
</div>
),
handleNavbarClick: function () {
this.setState({remove_home: true});
}
这是做事的适当反应方式吗?
是的,您提出的解决方案
render: function () {
var home = this.state.remove_home ? null : <Home ref="home" />
return (
<div className={classes}>
<Navbar ref="navbar"/>
{home}
<Footer ref="footer"/>
</div>
),
handleNavbarClick: function () {
this.setState({remove_home: true});
}
或多或少是用 React 处理这个问题的“正确”方法。请记住,目的render
是描述你的组件应该是什么样子在任何给定点。接触 DOM 并执行手动操作,或执行其他类型的命令性工作(例如“删除”元素)几乎总是错误的做法。
如果您担心语法,可以考虑内联或提取逻辑:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{this.state.remove_home ? null : <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
or
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{!this.state.remove_home && <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
or
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{this.renderHome()}
<Footer ref="footer"/>
</div>
),
renderHome: function() {
if (!this.state.remove_home) {
<Home ref="home" />
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)