7

我一直在研究高阶组件的反应。我的要求是我有一组组件，我需要对其进行扩展以赋予它们更多功能，而无需重写整个组件。在这种情况下，我在 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;

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

4

3 回答 3

8

HOC 将获取一个组件，添加更多功能并返回一个新组件，而不仅仅是返回组件实例，

你会做的是

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功能采取行动的组件

于 2017-11-28T09:29:57.830 回答
0

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

制作一个 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')
);

工作代码在这里

于 2017-11-28T09:53:35.073 回答
0

是的你可以

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，用户（状态）作为 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} />
于 2017-11-28T10:05:37.607 回答