点击New Note按钮无法弹出表单，请求排查问题（附代码）

问题原因 #

你的按钮点击回调逻辑完全错误：在onClick里返回<NoteForm />不会触发组件渲染，React不会识别这种方式来添加组件到DOM中，这也是为什么NoteForm里的console.log根本没执行——组件从来没被实例化过。

修复代码 #

修改Notes组件，用React状态控制表单的显示/隐藏：

import React, { useState } from "react";
import { deleteNote } from "../CRUD/noteFunction.js";
import NoteForm from "./noteForm.js";

function Notes({ Note }) {
  // 用状态控制表单是否显示
  const [showNoteForm, setShowNoteForm] = useState(false);

  return (
    <main className="page">
      <h2 className="page__title">Notes</h2>
      <button 
        onClick={() => setShowNoteForm(!showNoteForm)} 
        className="btn--gray"
      >
        NEW NOTE +
      </button>
      {/* 根据状态渲染表单 */}
      {showNoteForm && <NoteForm />}
    </main>
  );
}

export default Notes;

NoteForm组件无需修改，保持原样即可：

function NoteForm() {
  console.log("Form");
  return (
    <div>
      <form>
        <input type="text" placeholder="title"></input>
        <textarea></textarea>
        <button>Submit</button>
      </form>
    </div>
  );
}

export default NoteForm;

关键说明 #

React组件的渲染依赖状态（state）或属性（props）的变化：

• 点击按钮时切换showNoteForm的布尔值，触发组件重新渲染
• 当showNoteForm为true时，NoteForm才会被实例化并渲染到DOM中，此时你能看到表单，控制台也会输出"Form"

内容的提问来源于stack exchange，提问作者Flo77