React中如何将带Props的组件作为Props传递给另一个组件

在React里要实现把带Props的组件传给另一个组件，主要有两种常用方式，下面结合你提到的AgentDialogBox传递给AgGridReactTable的场景来举例：

方式1：直接传递已绑定Props的JSX元素 #

这种方式最简单，直接在父组件里把带Props的AgentDialogBox渲染成JSX元素，再作为Prop传给AgGridReactTable。

父组件代码 #

import AgentDialogBox from './AgentDialogBox';
import AgGridReactTable from './AgGridReactTable';

function ParentComponent() {
  // 定义reload逻辑
  const handleReload = () => {
    // 这里写刷新表格的具体逻辑，比如重新请求数据
    console.log('执行表格刷新');
  };

  // 提前绑定好reload属性，生成带Props的组件元素
  const agentDialog = <AgentDialogBox reload={handleReload} />;

  return (
    <div>
      <AgGridReactTable customDialog={agentDialog} />
    </div>
  );
}

子组件（AgGridReactTable）代码 #

子组件直接接收这个JSX元素并渲染即可：

function AgGridReactTable({ customDialog }) {
  return (
    <div className="table-container">
      {/* 直接渲染传入的带Props的对话框组件 */}
      {customDialog}
      {/* 这里写AgGrid表格的渲染逻辑 */}
    </div>
  );
}

方式2：传递组件本身+Props对象 #

如果需要子组件动态控制组件的Props，或者要复用不同的对话框组件，可以把组件类/函数和对应的Props分开传递，子组件内部负责组合渲染。

父组件代码 #

import AgentDialogBox from './AgentDialogBox';
import AgGridReactTable from './AgGridReactTable';

function ParentComponent() {
  const handleReload = () => {
    console.log('执行表格刷新');
  };

  return (
    <div>
      <AgGridReactTable 
        // 传递组件本身
        DialogComponent={AgentDialogBox}
        // 传递组件需要的Props
        dialogProps={{ reload: handleReload }}
      />
    </div>
  );
}

子组件（AgGridReactTable）代码 #

子组件通过解构接收组件和Props，然后用JSX渲染并展开Props：

function AgGridReactTable({ DialogComponent, dialogProps }) {
  return (
    <div className="table-container">
      {/* 动态渲染组件并传入Props */}
      <DialogComponent {...dialogProps} />
      {/* AgGrid表格逻辑 */}
    </div>
  );
}

两种方式各有适用场景：

• 方式1适合Props固定、不需要子组件干预的场景，写法简洁。
• 方式2更灵活，适合子组件需要修改Props，或者需要切换不同类型组件的场景。

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