Question

我在React的“ Header”和“ Main”中有两个不同的组件。

标题：

import React, { Component } from 'react'
import Logo from './HeaderComps/Logo'
import UserHeader from './HeaderComps/UserHeader'

export default class Header extends Component {

    render() {
        return (
            <header>
           <Logo />
<UserHeader name ="Boris"/>
            </header>
        )
    }
}

主要：

export default class Main extends Component {
state ={isLogged : false}

handleClientFirstImpact = () =>{
if(this.state.isLogged === false){
    return <Switch>
    <Route exact path ='/registration' component={Register} /> 
    <Route exact path ='/login' component={Login} /> 
    </Switch>
}
} 
    render() {
        return (

           <Router>
            <div className="Main">
                {this.handleClientFirstImpact()}

            </div>
            </Router>

        )
    }
}

在“主”中，我有两个组件“注册”和“登录”。如何使“登录”页面影响页眉的状态？是否有React技术或方法？我希望“ UserHeader”显示用户名，但我不知道如何影响其父状态。

Answer 1

可能会有一些通用组件，您将在其中调用Main和Header组件。假设该组件是App Component。因此，在App内您拥有

render() {
  return
     <div>
        <Header />
        <Main />
     </div>
}

现在您可以做的是将用户名保持在此应用程序组件的状态，并且该应用程序组件会将用户名传递给组件：：-

 <Header userName={userName} />

还将功能作为道具传递给主组件，这将使组件能够设置父组件的状态。

<Main setUserName={(newUserName) => this.setState(newUserName)} />

现在应将此setUserName属性传递给在主组件内部通过Route调用的组件。牢记您的示例（使用渲染道具代替Route组件）：

export default class Main extends Component {
state ={isLogged : false}

handleClientFirstImpact = () =>{
const { setUserName } =this.props;
if(this.state.isLogged === false){
    return 
      <Switch>
        <Route exact path ='/registration' 
          render={(props) => <Register {...props} setUserName={setUserName} />}
        /> 
        <Route exact path ='/login' 
          render={(props) => <Login {...props} setUserName={setUserName} />}
        /> 
    </Switch>
  }
} 
    render() {
        return (
           <Router>
            <div className="Main">
                {this.handleClientFirstImpact()}
            </div>
            </Router>
        )
    }
}

现在，您已经通过setUserName作为登录和注册的道具，并且可以使用此方法设置App组件的状态，这将反过来反映Header组件上的更改。

尽管该解决方案可能对您有用。我建议您简化应用程序布局。将路由功能保留在主应用程序组件中。使用单独的布局组件来呈现相似的页面布局。从长远来看，这将避免混乱。

在React中影响不同组件的状态

1 个答案: