如何使用React Portal?

时间:2018-03-20 19:00:20

标签: reactjs react-dom

我正在尝试使用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);

1 个答案:

答案 0 :(得分: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你要呈现它。