单击反应在新窗口中打开组件

Question

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

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

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

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

Answer 1

您可以使用ReactDOM.createPortal 在新窗口中呈现组件，正如David Gilbertson 在他的post 中解释的那样：

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

Answer 2

赞成的答案效果很好！

只是在这里留下一个功能组件版本，以防人们将来搜索它。

const RenderInWindow = (props) => {
  const [container, setContainer] = useState(null);
  const newWindow = useRef(null);

  useEffect(() => {
    // Create container element on client-side
    setContainer(document.createElement("div"));
  }, []);

  useEffect(() => {
    // When container is ready
    if (container) {
      // Create window
      newWindow.current = window.open(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      // Append container
      newWindow.current.document.body.appendChild(container);

      // Save reference to window for cleanup
      const curWindow = newWindow.current;

      // Return cleanup function
      return () => curWindow.close();
    }
  }, [container]);

  return container && createPortal(props.children, container);
};

Answer 3

此答案基于David Gilbertson's post。它已被修改为在 Edge 中工作。要在 Edge 中进行这项工作，div 和 style 元素必须是 created with the window into which they will be rendered。

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

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

Answer 4

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

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

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

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

Answer 5

添加到当前答案 - 将样式从原始窗口复制到弹出窗口，您可以这样做：

function copyStyles(src, dest) {
    Array.from(src.styleSheets).forEach(styleSheet => {
        dest.head.appendChild(styleSheet.ownerNode.cloneNode(true))
    })
    Array.from(src.fonts).forEach(font => dest.fonts.add(font))
}

然后添加

copyStyles(window.document, popupWindow.document);

在调用 window.open 之后，并且一旦 ref 被初始化

Answer 6

如果有人在将样式添加到新窗口时遇到问题，诀窍是将整个 DOM 头部从父窗口复制到新的弹出窗口。 首先你需要建立整个 html 骨架

newWindow.document.write("<!DOCTYPE html");
newWindow.document.write("<html>");
newWindow.document.write("<head>");
newWindow.document.write("</head>");
newWindow.document.write("<body>");
newWindow.document.write("</body>");
newWindow.document.write("</html>");
// Append the new container to the body of the new window
newWindow.document.body.appendChild(container);

现在在新窗口的 DOM 中我们有一个空的 head 标签，我们遍历父 head 标签并将其子标签附加到新的 head。

const parentHead= window.document.querySelector("head").childNodes;
parentHead.forEach( item =>{
    newWindow.document.head.appendChild(item.cloneNode(true)); // deep copy
})

仅此而已。新窗口与父窗口具有相同的头子窗口，您的所有样式现在都应该可以工作了。

附：有些样式可能有点顽固并且不起作用，我发现对这些样式有效的技巧是在正确的时间在 componentDidMount 或 useEffect 中添加 setTimeout ，以便您可以使用父头更新新头。像这样的

setTimeout(() => {
  updateHead();
}, 5000);