React点击按钮渲染Log组件失败问题求助

问题说明 #

想要实现点击按钮时渲染Log组件，但编写的触发函数无法生效，已知React的onClick事件需要借助React Hooks实现，希望在触发函数中完成Log组件的渲染，原代码如下：

import React from "react";
import { Navbar, Nav, Container, Button } from "react-bootstrap";
import { BrowserRouter } from "react-router-dom";
import { HashLink as Link } from "react-router-hash-link";
import "bootstrap/dist/js/bootstrap.min.js";
import "./Header.css";
import Frontline from "../Frontline";
import Infoline from "../Infoline";
import Workline from "../Workline";
import Helpline from "../Helpline";
import Log from "../login";
// import Footer from '../Footer/Footer'

export default function Header() {
  const onButtonClick = () => {
    return <Log />;
  };

  return (
    <div className="Navbar">
      <BrowserRouter>
        <Navbar
          bg="dark"
          variant="dark"
          sticky="top"
          expand="lg"
          collapseOnSelect
        >
          <Button
            className="d-none d-sm-block d-md-block d-lg-none"
            onClick={onButtonClick()}
          >
            Login
          </Button>
        </Navbar>
      </BrowserRouter>
    </div>
  );
}

错误分析 #

1. onClick绑定错误：onClick={onButtonClick()}会在组件首次渲染时直接执行函数，而非点击按钮时触发，正确写法应为传递函数引用onClick={onButtonClick}。
2. 组件渲染逻辑错误：直接在函数中返回<Log />不会触发React的渲染流程，React基于状态驱动渲染，需通过状态变量控制组件是否显示。

修复方案 #

使用useState Hook创建状态变量管理Log组件的显示状态，点击按钮时切换状态，再根据状态条件渲染组件：

1. 导入useState Hook；
2. 初始化状态变量控制Log组件的显示；
3. 修改点击事件函数，切换状态；
4. 在JSX中根据状态条件渲染Log组件。

修复后的完整代码 #

import React, { useState } from "react";
import { Navbar, Nav, Container, Button } from "react-bootstrap";
import { BrowserRouter } from "react-router-dom";
import { HashLink as Link } from "react-router-hash-link";
import "bootstrap/dist/js/bootstrap.min.js";
import "./Header.css";
import Frontline from "../Frontline";
import Infoline from "../Infoline";
import Workline from "../Workline";
import Helpline from "../Helpline";
import Log from "../login";
// import Footer from '../Footer/Footer'

export default function Header() {
  // 初始化状态，控制Log组件是否显示
  const [showLog, setShowLog] = useState(false);

  const onButtonClick = () => {
    // 点击按钮切换显示状态
    setShowLog(!showLog);
  };

  return (
    <div className="Navbar">
      <BrowserRouter>
        <Navbar
          bg="dark"
          variant="dark"
          sticky="top"
          expand="lg"
          collapseOnSelect
        >
          <Button
            className="d-none d-sm-block d-md-block d-lg-none"
            onClick={onButtonClick}
          >
            Login
          </Button>
        </Navbar>
        {/* 根据状态条件渲染Log组件 */}
        {showLog && <Log />}
      </BrowserRouter>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Ramakanth R Gunishetty