How to update a component that is other root by reactDom.render ?

[TongDaDa]

Do you want to request a feature or report a bug?
feature.

What is the current behavior?

When the parent component is updated, the child component is mounted to the body by detecting the visible property and via componentDidUpdate (note that the upper component is mounted to the #root div), but when my parent component is setState, the child component is The value is not updated. It seems that the subcomponent can be refreshed only once it is remounted.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
Child components are also updated when the parent component updates state, I want to find a great solution

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react 16.6
OSX

[sophiebits]

Can you provide a code example?

It’s hard to understand you, but portals may solve your problem: https://reactjs.org/docs/portals.html.

[TongDaDa]

@sophiebits not portals, it just renders Component to Container, but my problem is I want to update a state of the element of the appended body. now It doesn't dynamically update its props, because it doesn't in the parent life-cycle, so I create a ref and update it by forceforceUpdate method. do you understand? my English is not good.

export default class TopTipModal extends Component {

   /* forcing update the component of appended body */
     componentDidUpdate(prevProps){
        if (modalRef.current) {
            modalRef.current.forceUpdate()
        }
    }
 
  // some codes....

  /**
     * @desc take the props Content Component insert to body.
     * @param x {Number} -- x-position in document
     * @param y {Number} -- y-position in document
     * @return undefined
     */
    insertContentIntoBody = (x,y,instance) => {
        const {Content, Footer} = this.props;
        const ele = this.initWrapperEle(x, y);
        instance.addContentEle(ele);
        modalList.push(instance);
        this.topTipModalEle = ele;
        ReactDom.unstable_renderSubtreeIntoContainer(this, <CombinedComponent ref={modalRef} Content={Content} Footer={Footer} />, ele, () => {
           document.body.appendChild(ele);
           document.addEventListener('click', this._cancel)
        });
    }
}

There have an input component in the Content of CombinedComponent props and the TopTipModal Component was used for other business Component(parent Component). The input doesn't update its value when the parent Component updates its state.

[TongDaDa]

@sophiebits

[srph]

Portals should be able to solve this. If this is still an issue, I'd like to help you out if you can provide a CodeSandbox / JSFiddle for me to play around with.

[TongDaDa]

@srph I want to know what behavior the Portals, I think it is re-mount on dom.

[TongDaDa]

Portal does solve my problem, but DOM.render(Take forceUpdate) and Portal which has more performance?

[srph]

@TongDaDa Let's not talk about performance without context. I haven't ran into issues with Portal so far.

[TongDaDa]

@srph thanks, I'll to investigate the difference of them. thank your anwsers.😀

[srph]

Anytime. Do you mind closing this issue? :D

[TongDaDa]

Ok. sorry, I forgot it.