Question

晚安!!

我的问题标题可能已关闭，但这是我试图解决的问题。我有一个组件（内容），它监听DOM事件并调用Board（促进Container与其消费应用程序之间通信的实例）。

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
    }
}

我可以使用/调用Content组件，如下所述，

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

Manager组件使用Board API来管理呼叫请求，并维护其子级的状态。作为经理子女提供的组件也应支持董事会支持。

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

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

Answer 1

这些东西很快变得复杂。

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

以下是两个如何执行此操作的HOC示例：

注意：示例使用redux和react-router，但应使用相同的模式没有redux或react-router的工作。

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

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

授权HOC：authorization.hoc.js

{{1}}

Answer 2

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

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

然后你想用你的组件和共享的HOC（ContentWithManager）你可以做的事情 - module.exports = withManager（Content）

React

2 个答案: