javascript - 如何在全新的空白页面中呈现 React Route 组件

Question

我正在尝试使用 React Router 呈现打印页面。所以我有两个组成部分:

export default class PurchaseOrder extends React.Component{
....
render(){
   const {orderDate, client} = this.state.order;
   //omitted for brevity
    return(
            <BrowserRoute>
              <Button
                component={Link}
                to="/order/print"
                target="_blank"
              >
                Print
              </Button>
              <Route
                path="/order/print"
                render={props => (
                  <OrderPrint
                    {...props}
                    orderDate={orderDate}
                    client={client}
                  />
                )}
              />
            </BrowserRoute>

   }
}

和 OrderPrint:

export default function OrderPrint(props) {
  return (
    <div>props.orderDate</div>
    <div>props.client.name</div>
  );
}

如您所见，我正在尝试通过单击按钮来显示采购订单的可打印版本。 OrderPrint 组件被呈现，但它呈现在按钮的正下方。我可以将 Route 放在我的根组件 App 中，这样可以确保我只获得 OrderPrint 组件的内容，如下所示:

class App extends Component {
render() {
  return (
    <div className="App">
      <Router>
        <Route exact path="/" component={PurchaseOrder} />
        <Route exact path="/order/print" component={OrderPrint} />
      </Router>
    </div>
  );
}

但在那种情况下，我将无法将必要的 Prop 传递给它。那么在这种特殊情况下，如何用 OrderPrint 组件的内容替换整个页面内容并且仍然能够将必要的输入传递给它呢？

更新

正如@Akalanka Weerasooriya 在评论中提到的，我可以将整个状态保存在 App 组件中。但是有一件事阻止了我这样做:这意味着我实际上总是必须使用 Route 组件的 render 属性，而不是 component 属性。好的，这不是问题，但如果这是要走的路，那么为什么 React Router 文档几乎总是使用

<Route path="/about" component={About} /> 

pattern作为标准使用方式吗？所以回顾一下，如果我采用单一真理来源的方式并将我所有的状态存储在一个地方，那么这是否意味着我将始终使用

<Route path="/about" render={props=>(<div>props.someProp</div>)} />

我并不是说它有问题，它只是在 component={SomeComponent} 模式让我感到困惑之后才在文档中提到它。

Answer 1

不知道为什么打印页面需要不同的路径，但无论如何如果你想在新的空白页面上打印，你可以利用 ReactDOM.createPortal功能。
您可以使用 window.open 创建新页面甚至新窗口，同时保持 react 数据流同步。

这是一个在新窗口上运行门户的示例，其中包含使用门户触发此窗口的组件的实时状态更新:

running example ，我正在共享一个外部代码片段，而不是在这里使用堆栈代码片段，因为 window.open 在堆栈代码片段的上下文中返回 null

源代码:

class WindowPortal extends React.PureComponent {
  containerEl = document.createElement("div");
  externalWindow = null;

  componentDidMount() {
    const { width = 450, height = 250, left = 150, top = 150 } = this.props;
    const windowFetures = `width=${width},height=${height},left=${left},top=${top}`;
    this.externalWindow = window.open("", "", windowFetures);
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {
    this.externalWindow.close();
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }
}

class App extends React.PureComponent {
  state = {
    counter: 0,
    showWindowPortal: false
  };

  componentDidMount() {
    window.setInterval(() => {
      this.setState(state => ({
        counter: state.counter + 1
      }));
    }, 1000);
  }

  toggleWindowPortal = () => {
    this.setState(state => ({
      ...state,
      showWindowPortal: !state.showWindowPortal
    }));
  };

  closeWindowPortal = () => {
    this.setState({ showWindowPortal: false });
  };

  render() {
    return (
      <div>
        <h1>Counter: {this.state.counter}</h1>

        <button onClick={this.toggleWindowPortal}>
          {this.state.showWindowPortal ? "Close the" : "Open a"} Portal
        </button>

        {this.state.showWindowPortal && (
          <WindowPortal closeWindowPortal={this.closeWindowPortal}>
            <h2>We are in a portal on a new window</h2>
            <h3>{`This is the current state: ${this.state.counter}`}</h3>
            <p>different window but sharing the state!!</p>

            <button onClick={() => this.closeWindowPortal()}>Close me!</button>
          </WindowPortal>
        )}
      </div>
    );
  }
}