如何在React中渲染一个高阶组件

Question

我正在尝试使用React渲染一个高阶组件，但是我无法弄清楚如何使其工作。 因此，我有一个已经可以与react-navigation完美配合使用的高阶组件。 我的想法是展示一个组件，渲染时包含一个高阶组件。我正在尝试像这样做：

  render() {
    return (
      <View style={viewStyle}>
        {CheckLogin(Login)}
      </View>
    );
  }

这个 CheckLogin 是高阶组件，而 Login 则是组件本身。结果是React没有报错，但是页面是空白的。有什么办法可以渲染一个调用了组件本身的高阶组件吗？

- Ruffeng

---

"{CheckLogin}" 表示您正在解释 JS。如果您想要组件，则需要使用 "<CheckLogin />"。不确定这是否是您的全部问题，但这是一个开始？ - jmargolisvt

也许我太蠢了，但是什么是HOC？ - Mike Cluck

高阶组件是 A hoc。@jmargolisvt 问题是我必须传递 props，而我不知道该怎么做。 - Ruffeng

你需要传递哪些 props 到你的 Login 组件？将 props 传递到另一个组件就像 <Login user="name"/> 这样简单。 CheckLogin() 需要做一些特殊的事情吗？ - Michael Cheng

重点是CheckLogin包含一些将呈现在传递的组件(Login)上的方法。然后我使用React Navigation，所以我应该将this.props.navigation发送到CheckLogin组件。 - Ruffeng

你能分享一下你的高阶组件是怎么写的吗？因为有不止一种方法可以实现高阶组件，这会对我们很有帮助 :) - Sammy I.

Answer 1

你只是在JSX中将HOC当作函数进行调用，而你需要使用</>来渲染它。

// Apply your HOC
const EnhancedComponent = CheckLogin(Login);

class MyComponent extends Component {
  render() {      
    return (
      <View style={viewStyle}>
        <EnhancedComponent  />
      </View>
    );
  }
}

- Crysfel

---

太棒了！非常感谢@Crysfel。我的问题在于我试图直接在返回中呈现它。这帮了我很多，让我可以运用HOC的威力。 - Ruffeng

@Crysfel，在render方法中不要使用高阶组件。在render方法中调用高阶组件会导致组件在每次渲染时重新挂载。这里有文档说明，也有解答在这里。 - pudgereyem