Question

我从官方文档中了解了React高阶组件示例，但我想在可能的情况下使用props.children-即

<PageHoc> // Higher order component 
     <Route exact path="/" component={Invite}  /> // I want to auto inject props here
</PageHoc>

在我的页面HOC中，我可以自动渲染子组件，但是如何在此处附加一些新的道具？

import React from 'react';

  class PageHoc extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return this.props.children
    }
  }
    
export default PageHoc;

Answer 1

一种方法是克隆孩子并像这样覆盖道具，

  import React from 'react';

  class PageHoc extends React.Component {

    constructor(props) {
        super(props);
    }
    doSomething = () => {
    //your logic
    }
    render() {
        const childrenWithProps = React.Children.map(this.props.children, child =>
      React.cloneElement(child, { doSomething: this.doSomething })
    );

    return <div>{childrenWithProps}</div>
    }
  }

  export default PageHoc;

Answer 2

从技术上讲，您的PageHoc组件只是父组件，而不是HOC，因为它没有包装并返回 new 组件。但是您仍然可以通过react的Children帮助器和cloneElement将道具注入子组件。

import React, { Children, Component, createElement } from 'react';

class PageParent extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return Children.map(
      this.props.children, 
      child => cloneElement(child, { injectedProp: injectedPropValue })
    );
  }
}

export default PageParent;

作为HOC

const withInjectedProps = WrappedComponent => {
  const injectedProps = {
    prop1: value1,
    prop2: value2,
    <...etc...>
  };
  return <WrappedComponent {...this.props} {...injectedProps} />
}

export default withInjectedProps;

const InjectedRoute = withInjectedProps(Route);

<InjectedRoute exact path="/" component={Invite} /> // has props injected
<InjectedRoute exact path="/a" component={OtherComponent} /> // has props injected too!

种类取决于您需要如何注入道具，如果您只有一个组件，很多组件等。

我忘了提到按惯例，react HOC的名称以“ with”开头，但这不是规则，即react-redux的connect。

react HOC docs

与道具孩子建立反应HOC

2 个答案: