ReactJS Компонент не отображается

Question

Я очень новичок в мире программирования и React (использую время COVID-19, чтобы стать лучше ...). Я пытаюсь сделать компонент, когда пользователь нажимает кнопку регистрации. Моя цель - отобразить его в виде всплывающего окна в центре экрана, чтобы пользователь мог заполнить форму. (Я использую код Visual Studio и генератор реагирующих приложений)

Я не могу этого сделать, если я получаю console.log результат true / false (в зависимости от условия), он работает правильно, поэтому я предполагаю, что проблема в том, как я "вызываю" компонент.

Если бы кто-нибудь мог указать правильное направление, я был бы рад оценить!

Класс App, где функция-обработчик вызывает предполагаемое всплывающее окно div

import React from "react"
import Header from "./UI/Header";import RegisterWindow from "./UI/RegisterWindow"; import Footer from "./UI/Footer"; import MainSection from "./UI/MainSection";
import "./index.css"


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

  handleRegister(){
   this.setState({
     registerIsShowed: !this.state.registerIsShowed
   })
   const isShowed = this.state.registerIsShowed;
   return isShowed ? <RegisterWindow /> : null
  }

render(){
return (
  <div>
    <Header register={this.handleRegister} />
    <MainSection />
  </div>
)}

}


export default App

Это код заголовка, в котором расположена кнопка, которая вызывает открытие

import React from "react"

function Header(props) {
  return (
    <header>
      <nav className="navbar-header">
        <p className="header-data"></p>
        <ul className="navbar-menu-header">
          <li><button onClick={props.register}>Registrar</button></li>
          <li><button>Entrar</button></li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

и, наконец, компонент, который должен отображаться

import React from "react"

class RegisterWindow extends React.Component{
render(){
  return (
    <div className="register-window">
      <div>
        <form>
          <input name="firstName" placeholder="First name" type="text" />First Name
          <input name="lasttName" placeholder="Last name" type="text" />Last Name
        </form>
      </div>
    </div>
  )
}
}


export default RegisterWindow

спасибо,

Answer 1

Компонент RegisterWindow должен быть включен в функцию жизненного цикла Render в компоненте класса или в оператор возврата функционального компонента. Ваш App компонент основан на классе, поэтому он должен содержать метод render().

Установка состояния является асинхронной, поэтому даже если вы можете отобразить компонент из обратного вызова handleRegister() в компоненте класса, обновление состояния не будет немедленным, поэтому ваш синхронный лог c для отображения компонента RegisterWindow не будет работать.

Попробуйте что-то вроде этого:

handleRegister() {
  this.setState({
    registerIsShowed: !this.state.registerIsShowed
  });
}

render() {
  return (
    <>
      {this.state.registerIsShowed && <RegisterWindow />}

      <div>
        <Header register={this.handleRegister} />
        <MainSection />
      </div>
    </>
  )
}

this.state.registerIsShowed && <RegisterWindow /> является примером из Условный рендеринг .

Чтобы RegisterWindow выглядел плавающим над MainSection, вы можете присвоить ему абсолютную позицию.