javascript - 如何在 react 中将组件引用传递给路由组件

Question

在 react 中，我想将组件的引用传递给路由组件。但是当我路由到诸如“/”之类的路径时，它会重新渲染传递的组件，因此再次从 0 开始。 这是工作示例的链接 https://codesandbox.io/s/884yror0p2 这是一个代码，每当我从 Home 路由时-->About about 计数器从 0 开始。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Dummy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      c: 0
    };
    setInterval(() => {
      this.setState({ c: this.state.c + 1 });
    }, 1000);
  }

  render() {
    return <h1> Counter {this.state.c}</h1>;
  }
}

class BasicExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // com: <Dummy /> this technique also not work
    };
  }
  render() {
    let com = <Dummy />;
    return (
      <div>
        <Router>
          <div>
            {com}
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>

            <hr />
            <Route
              exact
              path="/"
              // render={() => <Home com={com} />} //this also not work
              component={props => <Home {...props} com={com} />}
            />
            <Route path="/about"
              component={props => <About {...props} com={com} />}             
             />
          </div>
        </Router>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        {this.props.com}
        <h2>Home </h2>
      </div>
    );
  }
}

class About extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }
  render() {
    return (
      <div>
        {this.props.com}
        <h2>About</h2>
      </div>
    );
  }
}

ReactDOM.render(<BasicExample />, document.getElementById("root"));

Answer 1

您不能通过“引用”传递组件。但是，如果您希望在所有组件之间拥有相同的数据，您可以在父组件 (BasicExample) 中初始化您的状态并将其向下传递或使用像 Redux 这样的状态容器。