Компонент высшего порядка (самообертка) в React

Добрый вечер !!

Название моего вопроса может быть неправильным, но вот проблема, которую я пытаюсь решить. У меня есть компонент (контент), который прослушивает событие 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
    }
}

Я могу потреблять/вызывать компонент контента, как указано ниже,

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

Компонент Manager использует Board API для управления запросами вызовов и поддерживает состояние своих дочерних элементов. Компонент, предоставленный менеджеру как дочерний элемент, также должен поддерживать поддержку Board.

В компоненте Example я хотел бы вызвать <Content pageType="A4" /> вместо переноса на <Manager> и каким-то образом использовать <Manager> в определении компонента Content (внутри компонента Content для использования Manager). то есть

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

reactjs javascript higher-order-components
person Mad-D    schedule 13.04.2018    source источник
comment
Почему он вообще должен быть компонентом?   -  person Jonas Wilms    schedule 13.04.2018
comment
Что делают на Content Component? почему он возвращает ноль?   -  person Ikram - Ud - Daula    schedule 13.04.2018
comment
@ДжонасВ. Я мог бы захотеть управлять состоянием позже на основе некоторых действий пользователя.   -  person Mad-D    schedule 13.04.2018
comment
@Ikram: На данный момент я как board.call() могу вызывать другие дочерние компоненты, которые возвращают элемент пользовательского интерфейса.   -  person Mad-D    schedule 13.04.2018
comment
Возможно, вы забыли импортировать Контент из './location'   -  person Ikram - Ud - Daula    schedule 13.04.2018

Ответы (2)


arrow_upward
1
arrow_downward

Уверен, вы просто ищете базовую реализацию HOC...

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

а затем, когда вы хотите использовать свои компоненты с общим HOC (ContentWithManager), вы можете сделать что-то вроде - module.exports = withManager(Content)

person Maxwelll    schedule 13.04.2018
comment
Спасибо, я реализовал HOC и обернул им свой компонент. export default withManager(<Content/>). где withManager - это компонент HOC, как упоминал Максвелл. - person Mad-D; 20.04.2018

arrow_upward
1
arrow_downward

Этот материал быстро усложняется.

Я могу быть выключен, так как я немного смущен тем, что вы пытаетесь сделать. Однако я думаю, что вам нужно передать обернутый (дочерний) компонент обертывающему (родительскому) компоненту.

Вот два примера HOC того, как это сделать:

Примечание. В примерах используется redux и react-router, но тот же шаблон должен работать без redux или 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)}/>
person thesb    schedule 13.04.2018
comment
Примечание. В компонент Authorization HOC можно вложить несколько компонентов. - person thesb; 14.04.2018