Question

我有组件Login：

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isAuthenticated: false
        };

并希望从其他文件isAuthenticated访问routes.js：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={() => (
        Login.state.isAuthenticated === true
        ? <Component {...this.props}/>
        : <Redirect to="/" />
    )}/> 
)


export default () => (
    <BrowserRouter>
        <div>
            <Navbar />
            <Switch>
                <Route path="/" exact component={Login} />
                <Route path="/register" exact component={Register} />
                <PrivateRoute path="/home" exact component={Home} />
            </Switch>
        </div>
    </BrowserRouter>
);

我该怎么做呢？这个路由文件叫什么？它是另一个“组件”吗？我是否需要以某种方式将状态从Login传递为props？

Answer 1

它的要点是父组件必须具有状态，因为父组件不能触及子组的状态。有几种方法可以实现您的目标：

让父级包含状态，只需将函数传递给Login即可控制对父级状态的访问
有条件地Login渲染PrivateRoute
使用Context API或某些状态管理工具（如redux）使状态实际上是全局的

1的一些建议：

class App extends React.Component {
  constructor() {
    super()
    this.state = { isAuthenticated: false }
  }

  setAuthenticated = (isAuthenticated) => {
    this.setState({ isAuthenticated })
  }

  render() {
    return (
      <BrowserRouter>
        <div>
            <Navbar />
            <Switch>
                <Route path="/" exact component={() =>
                  <Login
                    isAuthenticated={this.state.isAuthenticated} 
                    setAuthenticated={this.setAuthenticated}/>}/>
                <Route path="/register" exact component={Register} />
                <PrivateRoute path="/home" exact component={Home} />
            </Switch>
        </div>
    </BrowserRouter>)
  }
}

然后需要更改Login以提取isAuthenticated的值并使用道具中的setAuthenticated函数。

如何从另一个文件中的函数访问状态？

1 个答案: