如何在React中为作为Props传递的TypeScript组件传参？

问题分析 #

你当前的写法Content={ConfirmationContent={text='hotpotato' closeModal={false} }存在语法错误，React中无法直接通过这种方式给传入的组件传递props。需要调整Modal的Props定义和组件调用逻辑，下面提供两种可行方案：

方案一：拆分组件与组件Props（灵活复用场景首选） #

1. 修改Modal的Props类型，新增contentProps字段接收传给Content组件的参数，用泛型保证类型约束：

import React from 'react';

type ModalProps<T = {}> = {
  showModal: boolean;
  onClose: () => void;
  Content: React.ElementType<T>;
  contentProps: T;
};

const Modal = <T extends {}>({ showModal, Content, contentProps, onClose }: ModalProps<T>) => {
  if (!showModal) return null;
  
  return (
    <div className="modal-overlay">
      {/* 合并contentProps和onClose传给Content组件 */}
      <Content {...contentProps} closeModal={onClose} />
    </div>
  );
};

2. 父组件调用示例：

// 先定义ConfirmationContent的props类型
type ConfirmationContentProps = {
  text: string;
  closeModal: () => void;
};

const ConfirmationContent = ({ text, closeModal }: ConfirmationContentProps) => {
  return (
    <div className="modal-content">
      <p>{text}</p>
      <button onClick={closeModal}>关闭弹窗</button>
    </div>
  );
};

// 父组件中使用Modal
const ParentComponent = () => {
  const [showModal, setShowModal] = React.useState(false);
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>打开弹窗</button>
      <Modal
        showModal={showModal}
        onClose={() => setShowModal(false)}
        Content={ConfirmationContent}
        contentProps={{ text: 'hotpotato' }}
      />
    </div>
  );
};

方案二：直接传入带Props的JSX节点（简洁一次性场景首选） #

1. 简化Modal的Props类型，直接接收React节点作为子元素：

import React from 'react';

type ModalProps = {
  showModal: boolean;
  onClose: () => void;
  children: React.ReactNode;
};

const Modal = ({ showModal, onClose, children }: ModalProps) => {
  if (!showModal) return null;
  
  return (
    <div className="modal-overlay">
      {/* 直接渲染传入的子节点 */}
      {children}
    </div>
  );
};

2. 父组件调用示例：

const ParentComponent = () => {
  const [showModal, setShowModal] = React.useState(false);
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>打开弹窗</button>
      <Modal
        showModal={showModal}
        onClose={() => setShowModal(false)}
      >
        {/* 直接传入带props的Content组件 */}
        <ConfirmationContent 
          text="hotpotato" 
          closeModal={() => setShowModal(false)} 
        />
      </Modal>
    </div>
  );
};

补充说明 #

• 方案一的泛型写法能在TypeScript中提供严格的类型检查，避免props不匹配的错误；
• 方案二更贴合React组件嵌套的常规写法，逻辑直观；
• 你之前使用的React.ElementType本身没有问题，只是缺少了传递props的逻辑。

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