Javascript 如何在其父组件（DOM层次结构）之外呈现子组件-React.js

我有一个表组件，它有粘性的标题，而表体行包含dopdowns、省略号菜单和一些其他复杂的组件。表的每一行中都有另一个表体行，父行对于其子表体行也是粘性的。下拉菜单和省略号菜单位于下一个粘性行的后面。设置z索引是不够的，因为有粘性的行。唯一的方法是在表外呈现菜单，并提供更大的z索引

使问题更容易理解； 假设渲染方法类似于：

return <div id='parent'>
            <input />
            <span id='child'>{value}</span>
       </div>;

---

在快速搜索之后，我找到了在父组件（DOM层次结构）之外呈现子组件html的

React Portal

方法

组件：

import React, { useState } from 'react';
import { Portal } from '../Portal/Portal';


export const FirstPage = () => {

const [value, setValue] = useState('');

return (
    <div id='parent'>
        <input onChange={e => {setValue(e.target.value)}} value={value} />
        <Portal>
            <span id='child'>{value}</span>
        </Portal>
    </div>);
};

App.js:

import React from 'react';
import './App.css';
import { PortalDiv } from './Portal/Portal';
import { FirstPage } from './Pages/FirstPage';

function App() {
  return (
    <div className="App">
      <FirstPage />
      <PortalDiv />
    </div>
  );
}

export default App;

---

谢谢你发布答案，镇静。尤其是

constel=useRef（document.createElement（'div'）行为我修复了一个bug（useRef

）。谢谢。这个问题/答案值得更多：）

import React, { useEffect, useRef } from "react"
import ReactDOM from 'react-dom';

export const Portal = (props) => {
    const el = useRef(document.createElement('div'));
    useEffect(() => {
        const portal = document.getElementById('portal');
        portal.appendChild(el.current);

        return () => {
            portal.removeChild(el.current);
        };

    }, [props.children]);

    return ReactDOM.createPortal(props.children, el.current);
}

export const PortalDiv = () => <div id='portal'></div>;

import React from 'react';
import './App.css';
import { PortalDiv } from './Portal/Portal';
import { FirstPage } from './Pages/FirstPage';

function App() {
  return (
    <div className="App">
      <FirstPage />
      <PortalDiv />
    </div>
  );
}

export default App;

<div class="App">
    <div id="parent">
        <input value="random text">
    </div>
    <div id="portal">
        <div><span id="child">random text</span></div>
    </div>
</div>