反应身份高阶组件

Question

如何创建标识高阶组件，即仅呈现输入组件的高阶组件？

举例说明：给定组件

const TestComponent = () => <div>TEST</div>

我希望以下内容等效：

export default TestComponent;
export default identityHOC(TestComponent);

我试过了

const identityHOC = (Component) => (props) => Component(props);
const identityHOC = (Component) => (props) => () => Component(props);
const identityHOC = (Component) => (props) => <Component {...props} />;
const identityHOC = (Component) => (props) => () => <Component {...props} />;

和其他变体，但它们不起作用。

Answer 1

HOC 基本上只是一个函数，当它与一个组件一起提供时，returns 另一个（或相同的，如果你想的话）组件。

试试这个

import React from 'react';

const identityHOC = (WrappedComponent) => {
  class HOC extends React.Component {
    constructor(props){
      super(props)
    }
    render() {
      return <WrappedComponent {...this.props}/>;
    }
  }

  return HOC;
};

如果你想把它写成功能组件，

import react from 'React'
const identityHOC = (WrappedComponent) => props => 
  (<WrappedComponent {...props}/>)

您可能忘记导入 React。

Answer 2

实现 HOC（从 Vinay Chandran 的回答扩展）。

只渲染组件：

HOC

定义HOC函数。它应该 return 带有签名的东西 (props) => < Component>

import react from 'React'
const wrapWithHOC = (WrappedComponent) => props => 
  (<WrappedComponent {...props}/>)

基础组件

const BaseComponent = () => (
    <div>TEST</div>
);

const WrappedComponent = wrapWithHOC(BaseComponent)

在应用程序中使用

<App>
    <WrappedComponent />
</App>

注入道具

HOC

import react from 'React'
const wrapWithHOC = (WrappedComponent) => props => 
  (<WrappedComponent externalProp="ExternalProp Example" {...props}/>)

基础组件

const BaseComponent = ({ internalProp, externalProp}) => (
    <div>
        internal prop is: {internalProp}
        external prop is: {externalProp || 'Not Wrapped'}
    </div>
);

const WrappedComponent = wrapWithHOC(BaseComponent)

在应用程序中使用

<App>
    <WrappedComponent internalProp="This is a standard prop" />
</App>

反应身份高阶组件

React identity higher order component

reactjs

higher-order-components

只渲染组件：

HOC

基础组件

在应用程序中使用

注入道具

HOC

基础组件

在应用程序中使用