如何删除/卸载嵌套的反应组件
how to remove / unmount nested react components
我想卸载一个 React 组件,它属于一个包含三个组件的父组件。父组件有这个渲染函数:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
<Home ref="home"/>
<Footer ref="footer"/>
</div>
),
handleNavbarClick: function () {
// remove Home
}
如果用户随后单击导航栏中的 link 并且我想卸载 Home 组件,我该怎么做?似乎我唯一的选择就是做这样的事情(取自 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});
}
这是正确的反应方式吗?
试试这个
handleNavBarClick: function(){
React.findDOMNode(this.refs.home).style.display = 'none';
}
是的,您提出的
解决方案
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});
}
或多或少是 "correct" 用 React 处理这个问题的方法。请记住,render
的目的是描述您的组件在任何给定点 应该看起来的方式 。接触 DOM 并执行手动操作,或执行其他类型的命令性工作,例如 "removing" 一个元素,几乎总是错误的做法。
如果您担心语法问题,可以考虑内联或提取逻辑:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{this.state.remove_home ? null : <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
或
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{!this.state.remove_home && <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
或
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" />
}
}
我想卸载一个 React 组件,它属于一个包含三个组件的父组件。父组件有这个渲染函数:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
<Home ref="home"/>
<Footer ref="footer"/>
</div>
),
handleNavbarClick: function () {
// remove Home
}
如果用户随后单击导航栏中的 link 并且我想卸载 Home 组件,我该怎么做?似乎我唯一的选择就是做这样的事情(取自 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});
}
这是正确的反应方式吗?
试试这个
handleNavBarClick: function(){
React.findDOMNode(this.refs.home).style.display = 'none';
}
是的,您提出的
解决方案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});
}
或多或少是 "correct" 用 React 处理这个问题的方法。请记住,render
的目的是描述您的组件在任何给定点 应该看起来的方式 。接触 DOM 并执行手动操作,或执行其他类型的命令性工作,例如 "removing" 一个元素,几乎总是错误的做法。
如果您担心语法问题,可以考虑内联或提取逻辑:
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{this.state.remove_home ? null : <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
或
render: function () {
return (
<div className={classes}>
<Navbar ref="navbar"/>
{!this.state.remove_home && <Home ref="home" />}
<Footer ref="footer"/>
</div>
),
或
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" />
}
}