2

Есть react-компонент, который находится в глубине dom-дерева, и есть модальное окно, внутри которого тоже react-компонент, которое надо расположить в корне dom-а. Как можно передавать данные между этими react-компонентами если они не имеют общего родителя?

9
  • Через setState
    – hindmost
    31 июл 2018 в 15:28
  • как setState связывает два react-компонента?
    – dima_bur
    31 июл 2018 в 15:32
  • В React setState единственный способ передачи данных между компонентами. Почитайте текст по ссылке, там все описано.
    – hindmost
    31 июл 2018 в 15:35
  • @hindmost довольно-таки безапелляционно! 31 июл 2018 в 17:53
  • 1
    createPortal подходит, спасибо
    – dima_bur
    1 авг 2018 в 8:27

1 ответ 1

1

если что, я не в теме - не претендую на правильность подхода !

тем не менее, у меня вопрос:
а так уже не модно?

let div = _str => <div>_str</div>

все пишут только на классах??

void function() {
  let style = (_top = 50) => `
    position:fixed;
    top:${_top}px;
    left:10px;
    right:10px;
    border:solid 1px;
    text-align: center;
  `
  let div = document.createElement('div')
  div.setAttribute('style', style(50))
  div.id = 'modalBox'
  div.setAttribute('hidden', '')
  document.body.appendChild(div)
}();

// --

let modal = (_str, _click) => (<h1>{_str}
  <input type="button" value="батон" onClick={_click} />
</h1>);

//--

void function someModule() {
  let div = document.getElementById('modalBox')
  // --
  let localFoo = () => {
    removeChilds(div)
  }
  ReactDOM.render(
    modal('текст сообщения modal 2', localFoo),
    div
  )
  div.removeAttribute('hidden')
  // --
  function removeChilds(_parent) {
    Array.from(_parent.childNodes).forEach(_el => _el.remove())
    _parent.setAttribute('hidden', '')
  }
}()
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.