Question

我在我的reactjs应用程序中使用react-portal。我创建了两个根元素，一个用于将react应用呈现到其中，另一个用于react-portal：

<html>
    <head></head>
    <body>
        <div id='react-root-element' />
        <div id='react-portal-root-element' />
    </body>
</html>

我还有一个组件MyComponent，它使用react-portal将内容呈现到react-portal-root-element。内容由具有ID的div元素包装（我们称其为container-div）。

MyComponent：

export class MyComponent extends React.Component {

    // constructor ... 

    render() {
        return (
            <Portal node={ 'react-portal-root-element' }>
                <div id='divTest_id'>
                    // some more content
                </div>
            </Portal>
        );
    }
}

MyComponent的父项：

export class MyComponentParent extends React.Component {

    // ... 
    someMethod => {
        this.setState({ myProp: someNewValue });
    }

    render() {
        return (
            <div>
                <MyComponent someProp={ this.state.myProp } />
            </div>
        );
    }
}

当MyComponent第一次呈现其内容时，div元素将呈现为react-portal-root-element的子代。

现在，如果我使用setState在MyComponentParent中设置新状态，它将导致MyComponent的重新渲染，而MyComponent将再次渲染div。但这一次MyComponent的div并不是呈现为react-portal-root-element的子元素，而是呈现为body元素的子元素。

我不明白为什么会这样。而且我无法解决此问题。我想要的是MyComponent的内容始终呈现到react-portal-root-element中。

任何人都可以解释这种行为吗？

谢谢。

反应门户重新渲染问题

0 个答案: