如何在其父組件之外渲染子組件（DOM Hierarchy） - React.js

Question

我有一個表格組件，它有粘性標題，表格正文行包含下拉菜單、省略號菜單和其他一些復雜的組件。 表格的每一行內部都有另一個表格主體行，父行也對其子表格主體行具有粘性。 下拉菜單和省略號菜單留在下一個粘性行后面。 由於粘性行，設置 z-index 是不夠的。 唯一的方法是在表格之外渲染菜單並提供更大的 z-index。

使問題更容易理解； 假設渲染方法是這樣的：

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

由於 DOM 層次結構，我想在parent級之外渲染child級：

...
<body>
    <div id='parent'> <input /> </div>
    <div id='child'></div>
<body>
...

Answer 1

經過快速搜索，我發現React Portal方法可以在父組件（DOM Hierarchy）之外渲染子組件 html。

Component:

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>);
};

Portal.js 使用React Hooks實現：

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

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;

Result:

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

https://github.com/sedpol/react-portal

如何在其父組件之外渲染子組件（DOM Hierarchy） - React.js

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-25 21:30:46

如何在其父組件之外渲染子組件（DOM Hierarchy） - React.js

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-25 21:30:46

解決方案1
1 已采納 2020-04-25 21:30:46