Как сделать компонент обертку?

Question

[Артур Кудашев]

Здравствуйте, сделал клон Trello на React и dnd на чистом JS. Я хочу перенести dnd с JS на React, так как при перетаскивании элемента в список, он добавляется в список детей списка в DOM, но не добавляется в state списка и возникает ряд проблем. Еще я не могу получить доступ к методам списка и его state из dnd. Я изучаю React относительно не долго, поэтому могу не знать некоторые вещи. Если я что-то говорю не так, то прошу поправить меня. Я думаю, что нужно сделать обертку для доски. Вот так:

<DragManager>
    <Board />
<DragManager />

Answer 1

[Егор Живагин]

Ты пытаешься из обёртки юзать методы обёрнутого компонента?) Так не выйдет

Я думаю, тебе стоит вынести нужные методы в вышестоящий компонент. Условно:

class Example extends React.Component {
  state: {
  }

  needMethod1{
  };

  needMethod2{
  }

  render() {
    return (
      <DragManager needMethod1={this.needMethod1} needMethod2={this.needMethod2} >
        <Board needMethod1={this.needMethod1} needMethod2={this.needMethod2} />
      <DragManager />
    )
  }
}

П.С. - а чтобы не дублировать код можно почитать про HOC

Comments

[Артур Кудашев]

Егор Живагин, у меня еще вопрос. DragManager должен возвращать Board? Я хочу переписать DragManager с Vanilla JS на React, но React компонент должен что-то возвращать. В моем случае DragManager должен быть декоратором для Board.

[Егор Живагин]

Артур Кудашев, если вы воспользуетесь кодом из моего ответа - нет, не должен.

Но мне кажется вам лучше рендерить Board в компоненте DragManager. И тогда это будет ровно тем, чем вам нужно - простой обёрткой для Board
Для наглядности:

class App extends React.Component {
...
  render() {
    return (<DragManager />)
  }
}

class DragManager extends React.Component {
state: {
  }

  needMethod1{
  };

  needMethod2{
  }

  render() {
    return (
      <Board needMethod1={this.needMethod1} needMethod2={this.needMethod2} />
    );
  }
}

[Артур Кудашев]

Егор Живагин, спасибо

[Егор Живагин]

Артур Кудашев, а ещё можно почитать про HOC и придумать больше решений :)

[Артур Кудашев]

Егор Живагин, я уже читал про HOC, просто забыл про него :)