将 React 状态变量传递给静态页面以进行渲染

Question

将状态传递给静态组件，并使用变量进行显示。
React 新手，基于继承的代码库。

在Routes.js中我们有

componentDidMount() {
...catching an error ...
this.setState({ serverError: true, errorStack: err.response.data.stack, errorMsg: err.response.data.message });    
}

稍后我们有：

render() {
    return (
        <BrowserRouter>
          <ScrollToTop>
            <Switch>
              {
                  this.state.serverError ?
                    <Route component={Page500} />

然后我们有 Page500.js

import React from "react";
import { Button } from "reactstrap";

const Page500 = (props) => (
  <div className="text-center">
    <h1 className="display-1 font-weight-bold">500</h1>
    <p className="h1">Internal server error.</p>
    <p className="h2 font-weight-normal mt-3 mb-4">
      The server encountered something unexpected that didn&apos;t allow it to
      complete the request. <br />
      Error: {props.errorMsg}
    </p>
    <a href=".">
      <Button color="primary" size="lg">
        Return to website
      </Button>
    </a>
  </div>
);

export default Page500;

我试图在 Page500 函数中打印 errorMsg，但由于某种原因没有任何效果，甚至 "this" 也未定义并且不确定如何从 Routes 读取状态。

Answer 1

可以通过props传递Router中的错误信息

<Route render={(props) => <Page500 {...props} errorMsg={this.state.errorMsg} />} />

将 React 状态变量传递给静态页面以进行渲染

Passing React state variable to static page to render

reactjs

react-props