ooo*_*ski 5 reactjs react-portal
我在我的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 中。
谁能解释这种行为？
提前致谢。