时间戳

首页 > 解决方案 > React Pass Component 作为 props 并渲染它

javascript - React Pass Component 作为 props 并渲染它

问题描述

我正在尝试渲染作为道具传递的 React 组件。

export type SummaryCardProps = {
  site?: string;
  title: string;
  description?: string;
  image?: URL;
  imageAlt?: string;
  ContainerElement: Component;
};

export const SummaryCard: FC<SummaryCardProps> = (props) => {
  return (
    <props.ContainerElement>
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:site" content={new URL('https://' + props.site).toString()} />
      <meta name="twitter:title" content={`${props.title}`} />
      <meta name="twitter:description" content="View the album on Flickr." />
      <meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
    </props.ContainerElement>
  );
};

代码用于@peuconomia/react-meta-tags. 现在，我正在尝试使其通用。我希望 ContainerElelment 成为任何 ReactComponent 以保持简单明了。我需要它用于任何一个<Head />（Next.js）或<Fragment />现在。

可能的答案：渲染一个反应组件。但是，当我将 Component 作为类型时，它给了我错误。

TS2604: JSX element type 'props.ContainerElement' does not have any construct or call signatures

标签： javascriptreactjstypescript

解决方案

将 ContainerElement 的类型更改为React.ReactNode

推荐阅读