如何使用 React 门户？答案

【问题标题】：How to use React Portal?如何使用 React 门户？
【发布时间】：2018-03-20 19:00:19
【问题描述】：

我正在尝试使用 React Portal 功能，但似乎无法使其工作（我正在使用 React v16.2 和 ReactDOM v16.2）。在下面的示例中，当我单击“单击我”链接时，“是的！”应该出现但它没有：

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);

【问题讨论】：

标签： reactjs react-dom

【解决方案1】：

在您的示例中，您从 insertToast 创建并返回门户，但是，您不会对它做任何事情 - 您需要返回它并确保它包含在 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 你想要渲染它。

【讨论】：