代码之家 › 专栏 › 技术社区 › lost9123193

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

react-redux reactjs

0

lost9123193 · 技术社区 · 7 年前

我有以下代码:

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)(?);

但是,我不知道如何将其添加到函数代码中。是否需要将导出默认部分转换为类?

2 回复 | 直到 7 年前

1

DoHn 7 年前

但是,我不知道如何将其添加到函数代码中。是否需要将导出默认部分转换为类?

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);

2

1

flppv 7 年前

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 组件。