Как создать реагирующий компонент из узла DOM?

Question

Я хотел бы создать компонент реагирования из узла DOM (довольно маленький, ничего безумного), например:

//this footer is plain html and css, not a react component
const Footer = document.getElementById("#anAwesomeFooter")

и каким-то образом используйте его в моем приложении:

// before doing some magic
<Main>
 <Footer />
<Main />

Answer 1

import React from 'react';

const Footer = () => (<div>Footer of some div outside the Main component hierarchy</div>);

const SomeComponent = () => {
  const elementToAttach = document.getElementById('someElementId');
  return (
    <Main>
      {React.createPortal(Footer, this.elementToAttach)}
    </Main>
  );
};

Вы можете сделать getElementById в конструкторе для запуска только один раз, но это зависит от того, знаете ли вы, что элемент уже визуализирован

Answer 2

Я думаю, что шкафы, которые вы можете получить, получают содержимое узла DOM в componentDidMount и добавляют его к визуализированному элементу. Этот вопрос и ответы связаны между собой. https://stackoverflow.com/a/53897595/4703833