在 React/Nextjs 中将 props.children 和一个组件作为 prop 传递

Question

User.tsx 是一种导航栏，它通过 {props.children} 传递所有子组件。 我也想将面包屑组件传递给它，但我收到一条错误消息：

JSX 元素类型“props.component”没有任何构造或调用签名

布局.tsx：

 import UserShell from "./account/User
 import Breadcrumb from "./navigation/Breadcrumb";
 <User component={Breadcrumb}>{props.children}</User>;

用户.tsx：

type ShellProps = {
  children: React.ReactNode | React.ReactNode[];
  component?: React.ComponentType;


export default function UserShell(props: ShellProps) {
 return (
    <>
      <props.component />
      ^^^^^^^^^^^^^^^^^^//error is here

      <div>{props.children}</div>
    </>
}

关于如何解决这个问题的任何线索？

Answer 1

import React from 'react'

type ShellProps = {
    children: React.ReactNode | React.ReactNode[];
    component?: React.ComponentType;
}

function UserShell(props: ShellProps) {
    return (
        <>
            {props.component ? <props.component /> : null}
            <div>{props.children}</div>
        </>
}

操场

您可能需要将组件 (Component) 大写

Answer 2

尝试更新到这个

布局.tsx：

 import UserShell from "./account/User
 import Breadcrumb from "./navigation/Breadcrumb";
 <User Breadcrumb={Breadcrumb}>{props.children}</User>; //use Breadcrumb or Component (capital C)

用户.tsx

type ShellProps = {
  children: React.ReactNode | React.ReactNode[];
  Breadcrumb?: React.ElementType; //covers all elements


export default function UserShell({Breadcrumb, children}) {
 return (
    <>
      <Breadcrumb/>
      <div>{children}</div>
    </>
}