reactjs - React 门户可以在无状态功能组件 (SFC) 中使用吗？

Question

我用过 ReactDOM.createPortal在有状态组件的 render 方法中，如下所示:

class MyComponent extends Component {
    ...
    render() {
        return (
            <Wrapper>
                {ReactDOM.createPortal(<FOO />, 'dom-location')}
            </Wrapper>
        )
    }
}

...但它也可以被无状态(功能)组件使用吗？

Answer 1

将加入一个您不想手动更新 index.html 并添加额外标记的选项，此代码段将为您动态创建一个 div，然后插入子项。

export const Portal = ({ children, className = 'root-portal', el = 'div' }) => {
  const [container] = React.useState(() => {
    // This will be executed only on the initial render
    // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
    return document.createElement(el);
  });

  React.useEffect(() => {
    container.classList.add(className)
    document.body.appendChild(container)
    return () => {
      document.body.removeChild(container)
    }
  }, [])

  return ReactDOM.createPortal(children, container)
}