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

Question

我在层次结构中有几个组件，每个组件都需要几个事件处理程序，通过多层传递。这就是我在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(不要重复)的概念相悖，因为当我创建一个新的处理程序时，我必须更新所有四个文件。我想问的是是否有更有效的方法

Answer 1

您可以尝试挂钩、上下文或将处理程序组合到一个对象中，并将其传递给您的子组件，您可以使用PropTypes验证该对象的字段：)

此外，这些例子可以帮助你

Answer 2

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