反应高阶组件：对包装组件做出假设

Question

假设我有一个函数来装饰一个React组件类，其行为用于键盘导航项目列表，如下所示：

function MakeNavigable(ListComponent) {
  class NavigableComponent extends React.component {
    handleListKeydown(event) {
      const listLength = this.refs.list.getListLength();
      if (event.keyCode === 40 && this.state.focusedRow < listLength - 1) {
        // handle down arrow
        this.setState({ focusedRow: this.state.focusedRow + 1 });
      }
      // handle other keys here...
    },

    render() {
      return (
        <ListComponent onListKeydown={this.handleListKeydown} ref="list" />
      );
    },
  }

 return NavigableComponent;
}

请注意，我在包装组件getListLength()上调用一个方法，这意味着我必须假设ListComponent公开了这样一个方法。

确保像这样的函数只接受包含具有所需实例属性或方法的组件类的最佳方法是什么？ 是否有效使用高阶组件依赖于从包装组件中获取信息？ 如果没有，有什么替代方案？ 导航行为可以由mixin提供，但根据React文档 ：

不幸的是ES6在没有任何mixin支持下推出。 因此，当您将React与ES6类一起使用时，不支持mixins。 相反，我们正致力于在不诉诸mixins的情况下更轻松地支持此类用例。

Answer 1

确保像这样的函数只接受包含具有所需实例属性或方法的组件类的最佳方法是什么？

您无法确保高阶组件仅采用具有属性/功能的组件。

是否有效使用高阶组件依赖于从包装组件中获取信息？

不，它不是真正有效的用途。

如果没有，有什么替代方案？

您应该将getList代码重构为更高阶的组件，然后您不需要要求它存在于子级上。