在 React 中定义和导出 HOC

Question

我一直在研究 React 中的高阶组件。我的要求是我有一组组件，我需要扩展这些组件以便在不重写整个组件的情况下为它们提供更多功能。在这种情况下，我在 React 中发现了 HOC 的概念，其中可以使用纯函数扩展组件。我的问题是，我可以将扩展组件导出为普通组件吗？举个例子

需要扩展的组件

class foo extends React.Component {
    render(){
        //something
    }
}

export default foo;

HOC组件

function bar(foo) {
    render() {
         return <foo {...this.props} {...this.state} />;
    }
}

export default bar;

我可以那样使用组件吗？还是我做错了？

Answer 1

HOC 需要一个组件，添加更多功能和 return 一个新组件，而不仅仅是 return 组件实例，

你会做的是

function bar(Foo) {

   return class NewComponent extend React.Component {
        //some added functionalities here
        render() {
            return <Foo {...this.props} {...otherAttributes} />
        }
   }

}

export default bar;

现在，当您想向组件添加一些功能时，您可以创建组件的实例，例如

const NewFoo = bar(Foo);

您现在可以像这样使用

return (
    <NewFoo {...somePropsHere} />
)

此外，您可以允许 HOC 使用默认组件并将其导出为默认组件并在其他地方使用它，例如

function bar(Foo = MyComponent) {

然后像

一样创建导出

const wrapMyComponent = Foo();
export { wrapMyComponent as MyComponent };

HOC 的典型用例可能是 HandleClickOutside 功能，您可以通过该功能传递需要根据 handleClickOutside 功能

采取操作的组件

Answer 2

另一种方式可能是这样的：

制作一个 Foo 组件

class Foo extends React.Component {
    render() {
      return ( < h1 > hello I am in Foo < /h1>)
      }
    }

制作一个 HOC 组件。

class Main extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      component, props
    } = this.props;
    //extract the dynamic component passed via props.
    var Component = component;

    return ( < div > 
          < h1 > I am in main < /h1> 
          < Component {...props} > < /Component>
          </div > );
  }
}


ReactDOM.render( < Main component = {
    Foo
  } > < /Main>,
  document.getElementById('example')
);

工作代码here

Answer 3

是的，你可以

const bar = (Foo) => {
   return class MyComponent extend Component {
        render() {
            return <Foo {...this.props} />
        }
   }
}

//我们的 Foo 组件代码在这里

export default bar(Foo)

但这又取决于功能。例如：假设您使用的是 React 路由器，并且想在渲染组件之前检查用户是否存在，但不通过 HOC。例如：

<Route path="/baz" component={auth(Foo)} />

改为使用新组件。

注意：NewComponent 连接到 redux 并且 user (state) 作为 props 传递

class NewRoute extends Component{
    render(){
        const {component:Component, ...otherProps} = this.props;

        return(
          <Route render={props => (
            this.props.user? (
              <Component {...otherProps} /> 
              ):(
              <Redirect  to="/" />
                )
            )} 
          />
        );
    }
}

然后在路线上

<NewRoute path='/foo' component={Foo} />

在 React 中定义和导出 HOC

Defining and exporting HOC in React

javascript

components

reactjs

higher-order-components