javascript - 通过 React Router 将 Ref 传递给组件？

Question

我有以下设置

<Overview>
    <div className={styles.container}>
      <HeaderComponent/>
      <SecondaryHeader section={this.state.section} ref = {myref}/> // this ref how do i pass it to all the child components which are in routes
    </div>
    <div>
        <Routes fullScreenCB = {this.goToFullScreen}/>
    </div>
    <NetworkCheck/>
  </div>
</Overview>


const Routes = ({fullScreenCB}: IRouteProps) : React.ReactElement<IRouteProps> => {
      <Route exact path="/" component={withAuth(Home)} />
      <Route exact path="/about" component={withAuth(About)} />
      <Route exact path="/topics" component={withAuth(Topics)} />

})


myProtected Route HOC



export default (ProtectedRoute, fullScreenCB) => {


  class WrapperClass extends React.Component<any, {}> {
    constructor(props) {
      super(props);
      this.state = {
        isAuthenticated: process.env.NODE_ENV === "development" ? true : false
      };
    }

    render() {
      if (this.state.isLoading) {
        return (
          <div style={{width: "100%", height: "100%"}}>
              <CircularProgress style={{left: "50%", marginTop: "30%"}} size={"xlarge"}/>
          </div>
        )
      } else if (this.state.isAuthenticated) {
        let {forwardedRef, ...rest } = this.props;
        rest = {...rest, fullScreenCB};
        return (
          <ProtectedRoute
            ref={forwardedRef}
            {...rest}
          />
        )
      }
    }
  }

  let WrappedComponent = React.forwardRef(
    function withAuthorizationWarpper(props, ref) {
      return <WrapperClass {...props} forwardedRef={ref}/>;
    }
  );

  hoistNonReactStatic(WrappedComponent, ProtectedRoute);

  return WrappedComponent;
}

如何将辅助 header 的引用传递给子路由我尝试转发路由但无济于事。我对这个概念有点困惑。我知道如何将它从直接父级传递给子级https://www.javascriptstuff.com/use-refs-not-ids/

但是当路线出现时我有点困惑

Answer 1

我认为您对 ForwardRef 的使用有点困惑。当您想要访问由 HOC 包装的组件上的 ref 时，而不是当您希望将另一个组件的 ref 作为 props 传递时，它很有用

这里您需要的是将具有不同名称的引用传递给子路由

myRef = (ref) => {
   this.secRef = ref;
}
<Overview>
    <div className={styles.container}>
      <HeaderComponent/>
      <SecondaryHeader section={this.state.section} ref = {myref}/> 
    </div>
    <div>
        <Routes fullScreenCB = {this.goToFullScreen} secRef={this.secRef}/>
    </div>
    <NetworkCheck/>
  </div>
</Overview>


const Routes = ({fullScreenCB, secRef}: IRouteProps) : React.ReactElement<IRouteProps> => {
      <Route exact path="/" render={() => <[withAuth(Home)] secRef={secRef} />} />
      <Route exact path="/about" render={() => <[withAuth(About)] secRef={secRef} />} />
      <Route exact path="/topics" render={() => <[withAuth(Topics)] secRef={secRef} />} />
})


myProtected Route HOC



export default (ProtectedRoute, fullScreenCB) => {


  class WrapperClass extends React.Component<any, {}> {
    constructor(props) {
      super(props);
      this.state = {
        isAuthenticated: process.env.NODE_ENV === "development" ? true : false
      };
    }

    render() {
      if (this.state.isLoading) {
        return (
          <div style={{width: "100%", height: "100%"}}>
              <CircularProgress style={{left: "50%", marginTop: "30%"}} size={"xlarge"}/>
          </div>
        )
      } else if (this.state.isAuthenticated) {
        let {forwardedRef, ...rest } = this.props;
        rest = {...rest, fullScreenCB};
        return (
          <ProtectedRoute
            ref={forwardedRef}
            {...rest}
          />
        )
      }
    }
  }

  let WrappedComponent = React.forwardRef(
    function withAuthorizationWarpper(props, ref) {
      return <WrapperClass {...props} forwardedRef={ref}/>;
    }
  );

  hoistNonReactStatic(WrappedComponent, ProtectedRoute);

  return WrappedComponent;
}

一旦像上面那样实现它，您将能够使用 this.props.secRef 访问子组件中的 SecondaryHeader's ref

P.S 但是，这不建议将引用传递给其他组件，如果您希望在其他组件中访问某些功能或属性，最好将其提升这些属性直到公共(public)父级，并将它们作为 props 或通过上下文传递给所需的组件