Javascript 单击 react 在新窗口中打开一个组件

Open a component in new window on a click in react

提问by Vandhana

I have a component which displays a data. I have to open this component in a new window on clicking a button/ link from a parent component.

我有一个显示数据的组件。单击父组件中的按钮/链接时，我必须在新窗口中打开此组件。

export default class Parent extends Component {
    construtor(props) {
        super(props);
    }

    viewData = () => {
        window.open('childcomponent.js','Data','height=250,width=250');
    }

    render() {
        return (
            <div> <a onclick={this.viewData}>View Data</a></div>
        )
    }
}

I dont know how to invoke another component and also display it in a new size specified window.

我不知道如何调用另一个组件并将其显示在指定大小的新窗口中。

Actually I need to send a props to that child component with which it will fetch me the data from database and render it.

实际上，我需要向该子组件发送一个道具，它将从数据库中获取数据并呈现它。

回答by CD..

You can use ReactDOM.createPortalto render a component in a new window as David Gilbertsonexplains in his post:

您可以使用ReactDOM.createPortal在新窗口中渲染组件，正如David Gilbertson在他的帖子中所解释的：

class MyWindowPortal extends React.PureComponent {
  constructor(props) {
    super(props);
    // STEP 1: create a container <div>
    this.containerEl = document.createElement('div');
    this.externalWindow = null;
  }

  render() {
    // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }

  componentDidMount() {
    // STEP 3: open a new browser window and store a reference to it
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {
    // STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false
    // So we tidy up by closing the window
    this.externalWindow.close();
  }
}

class MyWindowPortal extends React.PureComponent {
  constructor(props) {
    super(props);
    // STEP 1: create a container <div>
    this.containerEl = document.createElement('div');
    this.externalWindow = null;
  }

  render() {
    // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }

  componentDidMount() {
    // STEP 3: open a new browser window and store a reference to it
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {
    // STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false
    // So we tidy up by closing the window
    this.externalWindow.close();
  }
}

回答by Ryan Taylor

This answer is based on David Gilbertson's post. It has been modified to work in Edge. To make this work in Edge divand styleelements must be created with the window into which they will be rendered.

此答案基于David Gilbertson 的帖子。它已被修改为在 Edge 中工作。为了使这项工作在边缘div和style元件必须与为他们将要呈现的窗口中创建。

class MyWindowPortal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.containerEl = null;
    this.externalWindow = null;
  }

  componentDidMount() {
    // STEP 1: Create a new window, a div, and append it to the window. The div 
    // *MUST** be created by the window it is to be appended to (Edge only)
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
    this.containerEl = this.externalWindow.document.createElement('div');
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {
    // STEP 2: This will fire when this.state.showWindowPortal in the parent component
    // becomes false so we tidy up by just closing the window
    this.externalWindow.close();
  }

  render() {
    // STEP 3: The first render occurs before componentDidMount (where we open the
    // new window) so container may be null, in this case render nothing.
    if (!this.containerEl) {
      return null;
    } 

    // STEP 4: Append props.children to the container <div> in the new window
    return ReactDOM.createPortal(this.props.children, this.containerEl);  
  }
}

The full modified source can be found here https://codepen.io/iamrewt/pen/WYbPWN

完整的修改源可以在这里找到https://codepen.io/iamrewt/pen/WYbPWN

回答by samanime

You wouldn't open the component directly. You'll need a new page/view that will show the component. When you open the window, you'll then point it at the appropriate URL.

您不会直接打开组件。您需要一个新的页面/视图来显示组件。当您打开窗口时，您会将其指向适当的 URL。

As for size, you provide it as a string in the third parameter of open, which you actually have correct:

至于大小，您在 open 的第三个参数中将其作为字符串提供，您实际上是正确的：

window.open('http://example.com/child-path','Data','height=250,width=250');

Note, however, that browsers may, for a variety of reasons, not respect your width and height request. For that reason, it's probably a good idea to also apply appropriate CSS to get a space the right size in case it does open larger than you wanted.

但是请注意，浏览器可能出于各种原因不尊重您的宽度和高度请求。出于这个原因，最好同时应用适当的 CSS 以获得正确大小的空间，以防它打开比您想要的大。