如何创建反向反应门户

Question

React portals let you render a React child into a different DOM element, somewhere totally separate on the page.

I want to do the reverse: I want to render a DOM element once, elsewhere on the page, and then pull it into my React DOM output depending on my react tree.

The specific use case for this is Monaco Editor . It's a complex component, which is expensive to render from scratch, but cheap to update. In my application, the editor appears/disappears as users open/close different content. That means React creates the component from scratch each time new content is opened, and the delay to create a new editor makes that action a slower than I'd like.

I'd like to render it once, hide it somewhere, and then show it in the right place in my DOM when & where it's needed. I know that I only need one instance at any time.

Answer 1

In the end I built a library to do it myself: https://github.com/httptoolkit/react-reverse-portal .

Render your content in one place, once, and pass it around and insert it into the DOM somewhere else without rerendering.

Example:

import * as portals from 'react-reverse-portal';

const MyComponent = (props) => {
    const portalNode = React.useMemo(() => portals.createPortalNode());

    return <div>
        <portals.InPortal node={portalNode}>
            <MyExpensiveComponent
                myProp={"defaultValue"}
            />
        </portals.InPortal>

        { props.componentToShow === 'component-a'
            ? <ComponentA portalNode={portalNode} />
            : <ComponentB portalNode={portalNode} /> }
    </div>;
}

const ComponentA = (props) => {
    return <div>
        A:
        <portals.OutPortal node={props.portalNode} />
    </div>;
}

const ComponentB = (props) => {
    return <div>
        B:
        <portals.OutPortal
            node={props.portalNode}
            myProp={"newValue"}
            myOtherProp={123}
        />
    </div>;
}