如何使用反应门户?
How to use React Portal?
我正在尝试使用 React Portal 功能,但似乎无法正常工作(我使用的是 React v16.2 和 ReactDOM v16.2)。在下面的示例中,当我单击 'click me' link 'yey!' 时应该出现但它没有出现:
HTML:
<div id="app-root"></div>
<div id="toast-root"></div>
JavaScript:
const appRoot = document.getElementById('app-root');
const insertToast = (toastRoot) => ReactDOM.createPortal(
'yey!',
toastRoot,
);
class App extends React.Component {
insertToasts() {
const toastRoot = document.getElementById('toast-root');
insertToast(toastRoot);
}
render() {
return (
<div>
<a onClick={this.insertToasts}>click me</a>
</div>
);
}
}
ReactDOM.render(<App />, appRoot);
在您的示例中,您从 insertToast
创建并 return 门户,但是,您不对其进行任何操作 - 您需要 return 它并确保它包含 within your render
method:
const appRoot = document.getElementById('app-root');
const insertToast = (toastRoot) => ReactDOM.createPortal(
'This is in toast-root - yey!',
toastRoot,
);
class App extends React.Component {
insertToasts() {
const toastRoot = document.getElementById('toast-root');
return insertToast(toastRoot);
}
render() {
return (
<div>
<div>This is in app-root.</div>
{this.insertToasts()}
</div>
);
}
}
ReactDOM.render(<App />, appRoot);
即使它没有在与组件相同的 DOM 中呈现,您仍然必须告诉 React 您想要呈现它。
我正在尝试使用 React Portal 功能,但似乎无法正常工作(我使用的是 React v16.2 和 ReactDOM v16.2)。在下面的示例中,当我单击 'click me' link 'yey!' 时应该出现但它没有出现:
HTML:
<div id="app-root"></div>
<div id="toast-root"></div>
JavaScript:
const appRoot = document.getElementById('app-root');
const insertToast = (toastRoot) => ReactDOM.createPortal(
'yey!',
toastRoot,
);
class App extends React.Component {
insertToasts() {
const toastRoot = document.getElementById('toast-root');
insertToast(toastRoot);
}
render() {
return (
<div>
<a onClick={this.insertToasts}>click me</a>
</div>
);
}
}
ReactDOM.render(<App />, appRoot);
在您的示例中,您从 insertToast
创建并 return 门户,但是,您不对其进行任何操作 - 您需要 return 它并确保它包含 within your render
method:
const appRoot = document.getElementById('app-root');
const insertToast = (toastRoot) => ReactDOM.createPortal(
'This is in toast-root - yey!',
toastRoot,
);
class App extends React.Component {
insertToasts() {
const toastRoot = document.getElementById('toast-root');
return insertToast(toastRoot);
}
render() {
return (
<div>
<div>This is in app-root.</div>
{this.insertToasts()}
</div>
);
}
}
ReactDOM.render(<App />, appRoot);
即使它没有在与组件相同的 DOM 中呈现,您仍然必须告诉 React 您想要呈现它。