ReactJS 组件不显示答案

【问题标题】：ReactJS Component not displayingReactJS 组件不显示
【发布时间】：2020-07-05 11:46:36
【问题描述】：

我是编程世界和 React 的新手（利用 COVID-19 时间变得更好......）。当用户单击注册按钮时，我正在尝试呈现组件。我的目标是将其显示为屏幕中间的弹出窗口，供用户填写表格。（我正在使用 Visual Studio 代码和 React 应用生成器）

我无法做到这一点，如果我 console.log 结果真/假（取决于条件）它可以正常工作，所以我猜问题是我“调用”组件的方式。

如果有人能指出好的方向，我将不胜感激！

处理函数调用假定弹出 div 的 App 类

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

这是触发打开的按钮所在的Header代码

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

谢谢你，

【问题讨论】：

onClick 不期望返回值。对于初学者来说，这是一个常见的错误。反应如何知道它应该在哪里呈现？您需要将RegisterWindow 组件直接包含在渲染中并在那里显示或隐藏它（有时使用 if...else，有时使用三元组等）。

标签： javascript reactjs visual-studio-code

【解决方案1】：

RegisterWindow 组件必须包含在类组件的渲染生命周期函数中，或包含在功能组件的返回语句中。您的 App 组件是基于类的，因此它必须包含 render() 方法。

设置状态是异步的，因此即使您可以从类组件中的handleRegister() 回调呈现组件，状态更新也不会立即更新，因此您显示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 /> 是 Conditional Rendering 的一个示例。

要使RegisterWindow 出现在MainSection 上方浮动，您可以使用绝对位置设置它的样式。

【讨论】：

谢谢！我现在明白它背后的逻辑了。它现在工作正常！