Reactjs 提交密码后如何呈现组件？

我的react单页web应用程序中有需要密码才能查看的组件。单击后，将呈现密码表单组件。我编写了逻辑来检查密码是否正确。如果它是正确的，那么如何保留密码表单组件，并呈现链接最初指向的组件

我尝试过切换可见性，但我想我最困惑的是如何在密码正确的情况下使用React Router渲染组件

父组件

 handleClick = (e) => { 
e.preventDefault();
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
}


render() {


    return (
        <div className="BigNames">
            <Link onClick={this.handleClick} className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
                <span className='Name'>Adobe Creative Cloud</span>
                <span className='Text'>: App Banner</span>  <i className="fas fa-lock"></i>
            </Link>

import React, { Component } from 'react';
import './Password.css';
import Adobe from './Big Work/Adobe';


export default class Password extends Component {

static defaultProps = {
  password: 'pierpoint'
}

constructor(props) {
    super(props)

    this.state = {
      visible: true,
      value: ''
    }



    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


    handleChange(e) {    
      e.preventDefault();      
      this.setState({value: e.target.value});
  }


    handleSubmit(e) {
      e.preventDefault();
      if(this.state.value === this.props.password) {
        alert('Correct!');
        this.setState({visible: false});
        return( <Adobe />)
      } else (alert('Incorrect Password!'))
  }

  handleClick(event) {
    event.preventDefault()
    this.setState(prevState => ({
      visible: !prevState.visible,
    }))
  }


render() {
    if (!this.state.visible) {
    return null
}

    return (
        <div className="pwd">

            <div className="enter-pwd">
            <button className='exit' onClick={this.handleClick}> &#10005; </button>
                <form onSubmit={this.handleSubmit}>

                <input 
                 className="sub-text"
                 type='password'
                 name='password' 
                 placeholder='Enter password' 
                 value={this.state.value}
                 onChange={this.handleChange}>
                 </input>
                 <button
                 className="sub-mit"
                 type='submit'>
                   submit
                 </button>

                </form> 
            </div>

        </div>
    )
}
}

handleClick=（e）=>{
e、 预防默认值（）；
this.setState（{isPasswordVisible:！this.state.isPasswordVisible}）；
}
render（）{
返回(
创意云
：应用程序横幅

密码组件

 handleClick = (e) => { 
e.preventDefault();
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
}


render() {


    return (
        <div className="BigNames">
            <Link onClick={this.handleClick} className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
                <span className='Name'>Adobe Creative Cloud</span>
                <span className='Text'>: App Banner</span>  <i className="fas fa-lock"></i>
            </Link>

import React, { Component } from 'react';
import './Password.css';
import Adobe from './Big Work/Adobe';


export default class Password extends Component {

static defaultProps = {
  password: 'pierpoint'
}

constructor(props) {
    super(props)

    this.state = {
      visible: true,
      value: ''
    }



    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


    handleChange(e) {    
      e.preventDefault();      
      this.setState({value: e.target.value});
  }


    handleSubmit(e) {
      e.preventDefault();
      if(this.state.value === this.props.password) {
        alert('Correct!');
        this.setState({visible: false});
        return( <Adobe />)
      } else (alert('Incorrect Password!'))
  }

  handleClick(event) {
    event.preventDefault()
    this.setState(prevState => ({
      visible: !prevState.visible,
    }))
  }


render() {
    if (!this.state.visible) {
    return null
}

    return (
        <div className="pwd">

            <div className="enter-pwd">
            <button className='exit' onClick={this.handleClick}> &#10005; </button>
                <form onSubmit={this.handleSubmit}>

                <input 
                 className="sub-text"
                 type='password'
                 name='password' 
                 placeholder='Enter password' 
                 value={this.state.value}
                 onChange={this.handleChange}>
                 </input>
                 <button
                 className="sub-mit"
                 type='submit'>
                   submit
                 </button>

                </form> 
            </div>

        </div>
    )
}
}

import React，{Component}来自'React'；
导入“./Password.css”；
从“./Big Work/Adobe”导入Adobe；
导出默认类密码扩展组件{
静态defaultProps={
密码：“pierpoint”
}
建造师（道具）{
超级（道具）
此.state={
可见：对，
值：“”
}
this.handleClick=this.handleClick.bind（this）
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
handleChange（e）{
e、 预防默认值（）；
this.setState（{value:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
if（this.state.value==this.props.password）{
警惕（“正确！”）；
this.setState（{visible:false}）；
返回（）
}else（警报（“密码不正确！”）
}
handleClick（事件）{
event.preventDefault（）
this.setState（prevState=>({
可见：！prevState.visible，
}))
}
render（）{
如果（！this.state.visible）{
返回空
}
返回(
✕ 
提交
)
}
}

---

提交正确的密码后，密码组件确实会消失，但是以下条件组件不会呈现。有几种方法可以处理它。您可以将受保护路由与

反应路由器一起使用，或者在简单的情况下，您可以：

   class App extends Component {
     state = {
       isAuthenticated: false,
     }

   setIsAuthenticated = (bool) => {
     this.setState({isAuthenticated: bool}) 
  }
   render(){
   const { isAuthenticated } = this.state;

   return(
    if(isAuthenticated){
     return <YourMainComponent />
   )
   return <AuthFormComponent setIsAuthenticated={this.setIsAuthenticated} />
  }
}

类应用程序扩展组件{
状态={
I认证：错误，
}
setIsAuthenticated=（bool）=>{
this.setState（{isAuthenticated:bool}）
}
render（）{
const{isAuthenticated}=this.state；
返回(
如果（未经验证）{
返回
)
返回
}
}

这只是一个例子，但我希望它能给你一个如何处理它的提示。
有几种方法可以处理它。你可以将受保护路由与
反应路由器一起使用，或者在一个简单的情况下，你可以：

   class App extends Component {
     state = {
       isAuthenticated: false,
     }

   setIsAuthenticated = (bool) => {
     this.setState({isAuthenticated: bool}) 
  }
   render(){
   const { isAuthenticated } = this.state;

   return(
    if(isAuthenticated){
     return <YourMainComponent />
   )
   return <AuthFormComponent setIsAuthenticated={this.setIsAuthenticated} />
  }
}

类应用程序扩展组件{
状态={
I认证：错误，
}
setIsAuthenticated=（bool）=>{
this.setState（{isAuthenticated:bool}）
}
render（）{
const{isAuthenticated}=this.state；
返回(
如果（未经验证）{
返回
)
返回
}
}

这只是一个示例，但我希望它能为您提供一个如何处理的技巧。
这里没有太多的代码可以给出一个合适的示例，但在伪代码中，您需要执行以下操作：

<div>
  {isPasswordVerified 
    ? <ComponentYouWantToShow />
    : <Password callbackProp={setIsPasswordVerified} />
  }
</div>


{isPasswordVerified
? 
: 
}

密码组件需要一个回调道具将验证是否成功发送到父组件。然后在父组件中，您可以有条件地呈现适当的组件。无需在此处处理路由。
这里没有大量代码可以给出适当的示例，但在伪代码中，您需要做一些事情比如：

<div>
  {isPasswordVerified 
    ? <ComponentYouWantToShow />
    : <Password callbackProp={setIsPasswordVerified} />
  }
</div>


{isPasswordVerified
? 
: 
}

密码组件需要一个回调道具来向父组件发送验证是否成功。然后在父组件中，您可以有条件地呈现适当的组件。无需在此处处理路由。
以下是显示完整示例的代码笔：

在我的示例中，隐藏页面是一个名为SecretPage的组件，处理密码的表单名为password。父组件是App

因为我需要知道应用程序内部的密码是否正确，所以第一步是使密码成为受控组件

function Password(props){
  return (
  <div>
    <p>Maybe the secret is a potato ?</p>
    <form onSubmit={props.onSubmit}>
      <input type='password' value={props.password} onChange={props.onChange}/>
      <input type='submit' value='submit'/>
    </form>
  </div>);
}

因为secretVisible现在是应用程序的一个状态，所以知道它应该显示哪个页面非常容易。它只需要检查this.state.secretVisible

  render(){
    const secretVisible = this.state.secretVisible;
    let pageToDisplay;
    if(secretVisible){
      pageToDisplay = <SecretPage onTakeMeBackClicked={this.handleLogOff}/>;
    }
    else{
     pageToDisplay = <Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />; 
    }
    return (
      <div>
        {pageToDisplay}
      </div>
    );
  }
}

render（）{
const secretVisible=this.state.secretVisible；
让页面显示；
如果（秘密可见）{
pageToDisplay=；
}
否则{
pageToDisplay=；
}
返回(
{pageToDisplay}
);
}
}
以下是显示完整示例的代码笔：

在我的示例中，隐藏页面是一个名为SecretPage的组件，处理密码的表单名为password。父组件是App

因为我需要知道应用程序内部的密码是否正确，所以第一步是使密码成为受控组件

function Password(props){
  return (
  <div>
    <p>Maybe the secret is a potato ?</p>
    <form onSubmit={props.onSubmit}>
      <input type='password' value={props.password} onChange={props.onChange}/>
      <input type='submit' value='submit'/>
    </form>
  </div>);
}

因为secretVisible现在是应用程序的一个状态，所以知道它应该显示哪个页面非常容易。它只需要检查this.state.secretVisible

  render(){
    const secretVisible = this.state.secretVisible;
    let pageToDisplay;
    if(secretVisible){
      pageToDisplay = <SecretPage onTakeMeBackClicked={this.handleLogOff}/>;
    }
    else{
     pageToDisplay = <Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />; 
    }
    return (
      <div>
        {pageToDisplay}
      </div>
    );
  }
}

render（）{
const secretVisible=this.state.secretVisible；
让页面显示；
如果（秘密可见）{
pageToDisplay=；
}
否则{
pageToDisplay=；
}
返回(
{pageToDisplay}
);
}
}
谢谢！如果我想使用同一个单一密码组件，但根据单击的链接有条件地呈现不同的组件，我该如何使用此组件？要处理多个路由，您需要使用
react router
。我需要每个组件