React中如何将Header组件输入内容传递到Main_Part组件渲染

你的现有代码已经完成了核心的状态维护和props传递逻辑，只需要补全两处代码即可实现需求： #

1. 修正Header组件的冗余逻辑并优化体验 #

你当前Header组件的提交按钮重复绑定了提交事件，同时可以加提交后自动关闭弹窗的逻辑，修改后代码如下：

import React, {useState} from "react";
import "./Header.css";
import {Modal} from "../Modal/Modal";
import {Main_Part} from "../Main_Part/Main_Part";

export let Header = () => {
  let [modalActive, setModalActive] = useState(false);
  let [newList, setNewList] = useState([]);
  let [input, setInput] = useState('');

  let addList = (myInput) => {
    let newDiscussion = {
      id: Math.random(),
      task: myInput
    }
    setNewList([...newList, newDiscussion])
  }

  let handleInput = (e) => {
    setInput(e.target.value)
  }

  let submitTask = (e) => {
    e.preventDefault();
    addList(input);
    setInput('');
    setModalActive(false); // 提交后自动关闭弹窗
  }

  return (
    <header className="header">
      <div>
        <button onClick={() => setModalActive(true)}>Створити новий список</button>
      </div>
      <Modal active={modalActive} setActive={setModalActive}>
        <form onSubmit={submitTask}>
          <input
            type="text"
            placeholder="Створити"
            value={input} // 补充input的value绑定，实现受控组件
            onChange={handleInput}
          />
          <button type="submit">Create</button>
        </form>
        <button onClick={() => setModalActive(false)}>Закрити</button>
      </Modal>
      <Main_Part newList={newList}/>
    </header>
  )
}

额外补充了input的value绑定，把输入框改成受控组件，避免出现状态和视图不一致的问题。 #

2. 补全Main_Part组件的列表渲染逻辑 #

你已经在Header里把newList作为props传递给了Main_Part，只需要在Main_Part里遍历这个数组渲染内容即可：

import React from "react";
import "./Main_Part.css";

export let Main_Part = ({newList}) => {
  return (
    <div className="main">
      {/* 遍历newList渲染任务列表 */}
      {newList.map(item => (
        <div key={item.id} className="task-item">
          {item.task}
        </div>
      ))}
    </div>
  )
}

可选优化说明 #

如果后续你的项目组件层级变深，跨多层传递props不方便的话，可以考虑使用React Context或者Redux等状态管理工具来共享全局状态，当前你的组件是直接父子关系，用props传递的方式最简洁高效。

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