Javascript ReactJS组件未显示

我是编程界的新手，我会做出反应（使用新冠病毒-19时间变得更好…）。我试图在用户单击“注册”按钮时渲染组件。我的目标是将它显示为屏幕中间的弹出窗口，供用户填写表单。（我使用Visual studio代码和react应用生成器）

我无法做到这一点，如果我将console.log结果记录为true/false（取决于条件），它将正常工作，因此我猜问题在于我“调用”组件的方式

如果有人能指出好的方向，我将非常感激

处理程序函数调用假定的弹出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

从“React”导入React
从“/UI/Header”导入标题；从“/UI/RegisterWindow”导入RegisterWindow；从“/UI/Footer”导入页脚；从“/UI/MainSection”导入MainSection；
导入“/index.css”
类应用程序扩展了React.Component{
构造函数（）{
超级（）
这个州={
注册表显示：false
}
this.handleRegister=this.handleRegister.bind（this）
}
HandlerRegister（）{
这是我的国家({
registerIsShowed:！this.state.registerIsShowed
})
const isShowed=this.state.registerIsShowed；
返回是否显示？：空
}
render（）{
返回(
)}
}
导出默认应用程序

这是触发开口的按钮所在的标题代码

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

从“React”导入React
功能标题（道具）{
返回(


登记员
诱捕者

)
}
导出默认标题

最后是应该出现的组件

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

从“React”导入React
类RegisterWindow扩展React.Component{
render（）{
返回(
名字
姓
)
}
}
导出默认注册表窗口

---

谢谢，

类组件中的Render lifecycle函数或功能组件的返回语句中必须包含

RegisterWindow

组件。您的

App

组件基于类，因此必须包含

render（）

方法

设置状态是异步的，因此即使可以从类组件中的

HandlerRegister（）

回调呈现组件，状态更新也不会立即进行，因此显示

RegisterWindow

组件的同步逻辑也会失败

试着这样做：

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

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

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

handleRegister（）{
这是我的国家({
registerIsShowed:！this.state.registerIsShowed
});
}
render（）{
返回(
{this.state.registerIsShowed&&}
)
}

this.state.registerShowed&

是的一个示例

---

若要使

RegisterWindow

浮动在

Main部分的上方，可以使用绝对位置设置其样式。
类组件中的渲染生命周期函数中或功能组件的返回语句中必须包含
RegisterWindow
组件。您的
App
组件基于类，因此必须包含
render（）
方法

设置状态是异步的，因此即使可以从类组件中的
HandlerRegister（）
回调呈现组件，状态更新也不会立即进行，因此显示
RegisterWindow
组件的同步逻辑也会失败

试着这样做：

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

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

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

handleRegister（）{
这是我的国家({
registerIsShowed:！this.state.registerIsShowed
});
}
render（）{
返回(
{this.state.registerIsShowed&&}
)
}

this.state.registerShowed&
是的一个示例

要使
注册表窗口
浮动在
main部分上方
，可以使用绝对位置设置其样式。
onClick
不需要返回值。这是初学者常犯的错误。你怎么知道应该在哪里渲染呢？您需要将
RegisterWindow
组件直接包含在渲染中，并在那里显示或隐藏它（有时使用if…else，有时使用三元等）。
onClick
不需要返回值。这是初学者常犯的错误。你怎么知道应该在哪里渲染呢？您需要在渲染中直接包含
RegisterWindow
组件，并在那里显示或隐藏它（有时使用if…else，有时使用三元等）。谢谢！我现在明白了背后的逻辑。它现在工作正常了！非常感谢。我现在明白了背后的逻辑。它现在工作正常了！