在React中调用道具的正确方法

Question

我有以下代码：

function PrivateRoute({ component: Component, auth, ...rest }) {
    return (
        <Route
            {...rest}
            render={props =>
                auth === true ? (
                    <Component {...props} />
                ) : (
                    <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
                )
            }
        />
    );
}

function PublicRoute({ component: Component, auth, ...rest }) {
    return <Route {...rest} render={props => (auth === false ? <Component {...props} /> : <Redirect to="/dashboard" />)} />;
}

export default () => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={true} path="/login" exact component={Login} />
            <PrivateRoute auth={true} path="/news" exact component={News} />
            <PrivateRoute auth={false} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

我想在下面添加此内容以跟踪经过身份验证的道具：

function mapStateToProps(state) {
  return {
    auth: state.authenticated
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(?);

但是，我不确定如何将其添加到功能代码中。 我需要将导出默认部分转换为类吗？

Answer 1

但是，我不确定如何将其添加到功能代码中。 我需要将导出默认部分转换为类吗？

不，你没有。 如果您要使用状态，生命周期方法或refs（并且自从Hooks到来，甚至在这些情况下甚至不需要），只需要将功能组件转换为基于类的组件。

只需将导出的组件放在变量中而不是将其导出，然后将该变量与connect结合使用：

const RouterComponent = ({ auth }) => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={auth} path="/login" exact component={Login} />
            <PrivateRoute auth={auth} path="/news" exact component={News} />
            <PrivateRoute auth={auth} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

function mapStateToProps(state) {
  return {
    auth: state.authenticated
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(RouterComponent);

Answer 2

首先，请不要执行未命名的默认导出，您可以将其重写为：

const MyRouter = (props) => (
    <BrowserRouter>
        <Switch>
            <PublicRoute auth={true} path="/login" exact component={Login} />
            <PrivateRoute auth={true} path="/news" exact component={News} />
            <PrivateRoute auth={false} path="/blogs" exact component={Blog} />
            <Route render={() => <h3>No Match</h3>} />
        </Switch>
    </BrowserRouter>
);

然后您可以轻松地进行操作（还请注意，您只能从文件中默认导出一个文件）。

export default connect(mapStateToProps, mapDispatchToProps)(MyRouter);

注意，我添加了props作为MyRouter组件的参数。 现在，您可以在其中使用道具，并将auth={props.auth}传递到PrivateRoute组件。