Question

我想从DOM节点（一个很小的，没有什么疯狂的）创建一个react组件，例如：

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

我认为您可以获取的壁橱是获取componentDidMount中DOM节点的内容，并将其附加到渲染的元素上。这个问题和答案是相关的。 https://stackoverflow.com/a/53897595/4703833

Answer 2

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使其仅运行一次，但这取决于您是否知道元素已经渲染

如何从DOM节点创建React组件？

2 个答案: