要将React Portal显示在外部窗口中,可以使用ReactDOM.createPortal方法。以下是一个示例解决方法:
首先,在需要显示Portal的组件中,创建一个Portal组件。例如,我们有一个名为App的组件,需要将Portal显示在外部窗口中:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
{/* 其他组件内容 */}
{ReactDOM.createPortal(
这是一个Portal,
document.getElementById('portal-root')
)}
);
}
}
export default App;
在上面的代码中,我们使用ReactDOM.createPortal方法创建了一个Portal组件。第一个参数是要渲染的内容,第二个参数是一个DOM元素,表示要将Portal渲染到哪个位置。在这个例子中,我们将Portal渲染到id为'portal-root'的DOM元素中。
然后,在应用程序的HTML文件中,添加一个具有id为'portal-root'的空div元素。这将是我们将Portal渲染到的外部窗口中的位置:
React Portal示例
通过上述代码,我们在应用程序的HTML文件中创建了一个id为'portal-root'的空div元素。
最后,使用ReactDOM.render将App组件渲染到应用程序的根元素中:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( , document.getElementById('root'));
通过上述代码,我们将App组件渲染到id为'root'的DOM元素中。
现在,当应用程序运行时,Portal将被渲染到具有id为'portal-root'的外部窗口中,而不是App组件的根元素中。
上一篇:保持在粘贴值后的条件格式