如何为React.ReactNode变量注入子元素？含react-pdf实际场景

为什么测试代码报错？ #

你写的const MyButton = <Button size='large'/>是直接创建了一个React元素实例（属于React.ReactNode类型），而不是组件类型。React中，<MyButton>这种写法要求左边是组件（函数组件/类组件/HTML标签名），但你的MyButton是已经渲染好的元素，没有构造或调用签名，所以会报错JSX element does not have any construct or call signatures。

同时React.createElement的第一个参数要求是组件类型或标签名，也不能直接传入已有的React元素，所以这种方式也不生效。

测试代码的修复方式 #

方式1：拆分组件与props #

把组件类型和它的props分开传递，在需要渲染的地方组合：

export default function App() {
  // 保存组件类型和对应的props
  const buttonComponent = Button;
  const buttonProps = { size: 'large' };

  return (
    <div>
      <buttonComponent {...buttonProps}>Click here</buttonComponent>
    </div>
  );
}

方式2：用函数组件封装 #

定义一个接收子元素的函数组件，动态生成带props的按钮：

export default function App() {
  // 封装成函数组件，接收children并返回配置好的Button
  const MyButton = ({ children }) => <Button size='large'>{children}</Button>;

  return (
    <div>
      <MyButton>Click here</MyButton>
    </div>
  );
}

业务场景（@react-pdf/renderer）的解决方案 #

你的核心需求是让第一个组件传递PDF包裹能力，第二个组件只需用它包裹按钮，不需要知晓具体库。关键是不要传递已渲染的React元素，而是传递组件/渲染逻辑，让第二个组件能注入子元素（按钮）。

方案1：传递组件类型+props #

第一个组件传递PDF下载组件的类型和它的配置props：

import { PDFDownloadLink } from '@react-pdf/renderer';

export default function FirstComponent() {
  const pdfWrapperProps = {
    document: <MyPdfDoc pdfTimelineRows={pdfTimelineRows} />,
    fileName: "pdf"
  };

  return (
    <SecondComponent
      {...props}
      PdfWrapper={PDFDownloadLink}
      pdfWrapperProps={pdfWrapperProps}
    />
  );
}

第二个组件组合渲染，把按钮作为子元素传入：

export default function SecondComponent({ PdfWrapper, pdfWrapperProps, ...buttonProps }) {
  return (
    <PdfWrapper {...pdfWrapperProps}>
      <button {...buttonProps}>下载PDF</button>
    </PdfWrapper>
  );
}

方案2：传递渲染函数 #

第一个组件传递一个接收子元素的渲染函数，直接返回包裹好的PDF组件：

import { PDFDownloadLink } from '@react-pdf/renderer';

export default function FirstComponent() {
  const renderPdfWrapper = (children) => (
    <PDFDownloadLink
      document={<MyPdfDoc pdfTimelineRows={pdfTimelineRows} />}
      fileName="pdf"
    >
      {children}
    </PDFDownloadLink>
  );

  return (
    <SecondComponent
      {...props}
      renderPdfWrapper={renderPdfWrapper}
    />
  );
}

第二个组件调用渲染函数并传入按钮：

export default function SecondComponent({ renderPdfWrapper, ...buttonProps }) {
  return renderPdfWrapper(<button {...buttonProps}>下载PDF</button>);
}

为什么之前的方式不行？ #

你之前传递的<PDFDownloadLink .../>是已经生成的React元素，它的子元素在创建时就已经固定（没传的话就是空），无法再动态注入新的子元素。必须让第二个组件拥有创建这个元素的能力，才能把按钮作为子元素传进去。

内容的提问来源于stack exchange，提问作者sir-haver