React 中的高阶组件（自身）包装

Question

晚上好！！

我的问题标题可能不对，但这是我要解决的问题。我有一个组件（内容），它侦听 DOM 事件并调用板（促进容器与其消费应用程序之间通信的实例）。

import Board from '../Board';

class Content extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        window.addEventListener("message", this.handleCheck, false);
    }

    componentWillUnmount(){
        window.removeEventListener("message", this.handleCheck, false);
    }

    handleCheck =(event) => {
        const { board } = this.props;

        board.call({
            size: event.detail.size,
            panel: event.detail.panel,
            .....
        })
    }

    render(){
        return null
    }
}

我可以 consume/call 如下所述的内容组件，

import Manager from '../../Manager'
const Example = () => (
  <div>
    <Manager>
      <Content pageType="A4" />
    </Manager>
  </div>
);

Manager 组件利用 Board API 来管理呼叫请求，并维护其 children 的状态。作为 children 提供给 Manager 的组件也应该支持 Board prop.

在 Example 组件中，我想调用 <Content pageType="A4" /> 而不是用 <Manager> 包装，并以某种方式在 Content 组件定义中使用 <Manager> （在内容组件中利用管理器）。即

const Example = () => (
  <div>
     <Content pageType="A4" />
  </div>
);

Answer 1

这些东西很快就会变得复杂。

我可能会离开，因为我对你正在尝试做的事情有点困惑。但是，我认为您需要将包装（子）组件传递给包装（父）组件。

这里有两个 HOC 示例，说明如何执行此操作：

Note: Examples use redux and react-router, but the same pattern should work without redux or react-router.

重定向 HOC：redirect.hoc.js
重定向 HOC 示例：trans.app.container.js

<!-- Redirect HOC Example Code --> 
<Route component={RedirectHoc(MainContentContainer)} />

授权 HOC：authorization.hoc.js

<!-- Authorization HOC Example Code --> 
<Route exact path="/beer/add" component={AUTHORIZE_ADMIN(BeerAddComponent)}/>

Answer 2

很确定您只是在寻找基本的 HOC 实现...

function withManager(Component) {
   class WithManager extends React.Component {
     ...withManagerStuff
    render() {
      return <Component/>
    }
   }
   return WithManager;
}

然后你想在共享 HOC (ContentWithManager) 中使用你的组件，你可以做一些类似的事情 - module.exports = withManager(Content)

React 中的高阶组件（自身）包装

Higher Order Component (self) wrapping in React

javascript

reactjs

higher-order-components