如何在非主Component内部创建动态Component？

核心思路 #

把原本在App组件中渲染的Note列表，转移到CreateArea组件内部渲染。通过将notes状态和删除方法传递给CreateArea，让它负责管理输入区域和下方的笔记列表。

具体修改步骤 #

1. 更新App组件

将笔记的渲染逻辑从App转移到CreateArea，同时把notes数组和deleteNote方法作为props传给CreateArea：

function App() {
  const [notes, setNotes] = useState([]);

  function addNote(newNote) {
    setNotes(prevNotes => [...prevNotes, newNote]);
  }

  function deleteNote(id) {
    setNotes(prevNotes => prevNotes.filter(note => note.id !== id));
  }

  return (
    <div>
      <Header />
      <CreateArea 
        onAdd={addNote} 
        notes={notes} 
        onDelete={deleteNote} 
      />
    </div>
  );
}

2. 修改CreateArea组件

在CreateArea内部添加笔记列表的渲染区域，同时确保添加笔记时生成唯一ID：

function CreateArea(props) {
  const [note, setNote] = useState({
    title: "",
    content: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setNote(prevNote => ({
      ...prevNote,
      [name]: value
    }));
  }

  function submitNote(event) {
    // 为新笔记添加唯一ID
    props.onAdd({...note, id: Math.random().toString(36).substr(2, 9)});
    setNote({
      title: "",
      content: ""
    });
    event.preventDefault();
  }

  return (
    <div className="create-area-wrapper">
      <form>
        <input
          name="title"
          placeholder="Title"
          value={note.title}
          onChange={handleChange}
        />
        <textarea
          name="content"
          placeholder="Take a note..."
          rows="3"
          value={note.content}
          onChange={handleChange}
        />
        <button onClick={submitNote}>Add</button>
      </form>
      {/* 在表单下方渲染所有笔记 */}
      <div className="notes-list">
        {props.notes.map(note => (
          <Note
            key={note.id}
            id={note.id}
            title={note.title}
            content={note.content}
            onDelete={props.onDelete}
          />
        ))}
      </div>
    </div>
  );
}

3. 优化样式（可选）

添加CSS让布局更清晰，确保笔记列表在输入区域下方合理排列：

.create-area-wrapper {
  max-width: 850px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.notes-list {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

这样修改后，每次点击添加按钮生成的新笔记组件，就会直接显示在CreateArea内部的输入表单下方，而非作为独立组件存在于外部。

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