时间戳

首页 > 解决方案 > 如何在 React 中管理大量的处理程序

reactjs - 如何在 React 中管理大量的处理程序

问题描述

我在分层结构中有几个组件，每个组件都需要多个事件处理程序，通过多层传递。这就是我所拥有的App.js：

...
<Files
  plugins={this.state.plugins}
  folders={this.state.folders}
  hover={this.state.hover}
  editing={this.state.editing}
  onClickFolder={this.handleClickFolder}
  onCreateFile={this.handleCreateFile}
  onCreateFolder={this.handleCreateFolder}
  onDeleteFolder={this.handleDeleteFolder}
  onMouseEnterFolder={this.handleMouseEnterFolder}
  onMouseLeaveFolder={this.handleMouseLeaveFolder}
  onStartRenameFolder={this.handleStartRenameFolder}
  onRenameFolder={this.handleRenameFolder}
  onClickFile={this.handleClickFile}
  onDeleteFile={this.handleDeleteFile}
  onMouseEnterFile={this.handleMouseEnterFile}
  onMouseLeaveFile={this.handleMouseLeaveFile}
  onStartRenameFile={this.handleStartRenameFile}
  onRenameFile={this.handleRenameFile}
  onStopEditing={this.handleStopEditing}
  onRightClick={this.handleRightClick}
/>
...

然后在components/files.jsx：

...
<FolderList
  src={[]}
  hover={props.hover}
  editing={props.editing}
  folders={props.folders}
  onClickFolder={props.onClickFolder}
  onCreateFile={props.onCreateFile}
  onCreateFolder={props.onCreateFolder}
  onDeleteFolder={props.onDeleteFolder}
  onMouseEnterFolder={props.onMouseEnterFolder}
  onMouseLeaveFolder={props.onMouseLeaveFolder}
  onStartRenameFolder={props.onStartRenameFolder}
  onRenameFolder={props.onRenameFolder}
  onClickFile={props.onClickFile}
  onDeleteFile={props.onDeleteFile}
  onMouseEnterFile={props.onMouseEnterFile}
  onMouseLeaveFile={props.onMouseLeaveFile}
  onStartRenameFile={props.onStartRenameFile}
  onRenameFile={props.onRenameFile}
  onStopEditing={props.onStopEditing}
  onRightClick={props.onRightClick}
/>
...

依此类推，还有两个文件。正如您所看到的，代码开始看起来很混乱，并且违背了编程中的 DRY（不要重复自己）的概念，因为当我创建一个新的处理程序时，我必须更新所有四个文件。我要问的是是否有更有效的方法来做到这一点。

标签： reactjs

解决方案

你有很多选择。仔细浏览此页面。https://www.robinwieruch.de/react-pass-props-to-component

推荐阅读