5

我在我的 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）包装。

我的组件：

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 中。

谁能解释这种行为？

提前致谢。

4

0 回答 0