如何在React组件间传递Props文本：将Todo文本传入Modal标题

要完成将App中Todo的文本传递到Modal标题的需求，只需按以下步骤修改组件：

1. 更新Todo组件，添加Modal显示控制并传递文本 #

在Todo组件中引入状态钩子管理Modal的显示状态，点击Delete按钮时打开Modal，并将当前Todo的文本传递给Modal：

import { useState } from 'react';
import Modal from './Modal';
import Backdrop from './Backdrop';

function Todo(props){
  // 控制Modal显示的状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 打开Modal的方法
  const openModal = () => {
    setIsModalOpen(true);
  };

  // 关闭Modal的方法
  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn" onClick={openModal}>Delete</button>
      </div>
      {/* 当Modal打开时，渲染Modal和Backdrop */}
      {isModalOpen && (
        <>
          <Modal 
            todoText={props.text} 
            onCancel={closeModal} 
            onConfirm={closeModal}
          />
          <Backdrop onClick={closeModal} />
        </>
      )}
    </div>
  );
}

export default Todo;

2. 修改Modal组件，接收并渲染Todo文本 #

在Modal组件中接收传递过来的todoText属性，替换原有的固定文本，按需求格式显示：

function Modal(props){

  function cancelHandler(){
    props.onCancel();
  }

  function confirmHandler(){
    props.onConfirm();
  }

  return (
    <div className="modal">
      {/* 拼接需求的标题文本 */}
      <p>你确定吗？"{props.todoText}"</p>
      <button className="btn btn--alt" onClick={cancelHandler}>Cancel</button>
      <button className="btn" onClick={confirmHandler}>Confirm</button>
    </div>
  );
}

export default Modal;

关键说明 #

• Todo组件通过useState维护Modal的显示状态，点击Delete按钮触发状态变更打开Modal
• 渲染Modal时，将当前Todo的props.text通过todoText属性传递给Modal
• Modal组件读取props.todoText，将其插入到标题文本中，实现需求的显示效果
• 点击Cancel、Confirm按钮或Backdrop时，触发关闭回调隐藏Modal

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