React 高阶组件：对包装组件做出假设答案

【问题标题】：React higher-order components: making assumptions about wrapped componentsReact 高阶组件：对包装组件做出假设
【发布时间】：2016-04-14 00:05:36
【问题描述】：

假设我有一个函数来装饰一个 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 docs：

不幸的是，ES6 在没有任何 mixin 支持的情况下启动。因此，当您将 React 与 ES6 类一起使用时，不支持 mixins。相反，我们正在努力让支持此类用例变得更容易，而无需借助 mixins。

【问题讨论】：

你试过使用装饰器吗？那里没有很多，但是有一些很好的例子，这里有一个，请注意它是裸露的：github.com/kriasoft/react-decorators
嗯，是的，上面的高阶组件创建器可以与装饰器一起应用。问题是，对于需要来自修饰类的信息的高阶组件的最佳实践是什么？
@dysfunction 如果您也将列表传递给ListComponent，那么您也可以作为道具访问？
基本上不可能要求引用，因为它们在渲染完成之前不存在。由于它们并不总是存在，因此依赖它们是不好的。如果您添加更多信息，我们可以找到更好的模式。

标签： javascript reactjs

【解决方案1】：

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

您不能确保高阶组件只会采用具有属性/功能的组件。

依赖于像这样从被包装的组件中获取信息甚至是高阶组件的有效使用吗？

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

如果没有，还有什么办法？

您应该将getList 代码重构为高阶组件，这样您就不需要要求它存在于子组件中。

【讨论】：