如何使用React JS删除UI组件

How to remove UI components using React JS

本文关键字：UI 组件 删除 JS 何使用 React      更新时间：2023-09-26

我很难找到有关如何在使用react时删除UI组件的相关文档。例如，有一个登录表单。用户单击提交，现在该表单应该从屏幕上删除。我该怎么做？

我已经找到了unmountComponentAtNode，但它只能在父级调用。我是否应该有一个知道所有子状态并有条件加载它们的父节点？所有子项都应该具有"isHidden"属性吗？如果为true，则该属性会将dom渲染为隐藏？

这一定是基本的，但我在react js教程中没有看到。我发现了这个stackoverflow帖子（react.js：删除组件），这真的是模式吗？这有点道理，但这意味着大型应用程序可能会有一个极其复杂的应用程序父类，该类根据配置管理应用程序状态的映射。

似乎我需要开始将应用程序状态定义为命名映射。例如：

BaseApp: showHeader=true;showContent=true;
LoginState: showBaseApp=true;showLoginForm=true; 
LoggedInState: showBaseApp=true;showFeed=true;

在任何时候，我们都必须更新所有状态映射并调用基类渲染方法。。。

在我看来，您的问题不是删除组件，而是显示正确的组件。是的，它可以用组件状态来完成，但也可以用Flux/Redux存储/还原器来完成。

在您的登录表单示例中，单击"提交"后，我们可以更改组件的本地状态，并显示另一个文本，如"请求已发送"或其他组件。

但您可以通过将组件的本地状态提取到存储区/还原器中来实现这一点，它在相对较大的应用程序中会更好地工作。尽管如此，存储状态的位置实际上取决于您自己。

我喜欢使用这样的隐藏道具。

class AppCtrlRender extends React.Component {
   render() {
    let page = this.state.appState.currentPage;
    let hideAbout = (page != 'about');
    let hideHome = (page != 'home');
    return (
      <div id='AppCtrlSty' style={AppCtrlSty}>
        <div id='allPageSty' style={allPageSty}>
          <AboutPage hide={hideAbout} />
          <HomePage hide={hideHome} />
        </div>
      </div>
    );
  }
}

export default class AboutPage extends React.Component {
  render() {
    if (this.props.hide) return null;
    let aTime = (new Cache()).time.toString();
    return (
      <div style={AboutPageSty}>
        React 0.14 ReFlux used for app state. This is the About Page.
        <NavMenu /><br/><br/>
          {aTime}
      </div>
    );
  }
}

相关文章：