如何将 props 传递给react-pdf/renderer renderToStream 函数？

Question

我正在尝试渲染 pdf 并通过重新发送将其作为附件发送。

这是我的测试 PDF。基本上是来自react-pdf/renderer 的文档，但添加了一个testprop。

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
})

export const TestPDF = ({ message }: { message: string | undefined }) => (
  <Document>
    <Page size='A4' style={styles.page}>
      <View style={styles.section}>
        <Text>{message ?? 'No message'}</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
)

我正在尝试按如下方式渲染ToStream：

let stream = await renderToStream(createElement(TestPDF, { message }))

当没有 message 属性并且我只是渲染 TestPDF 时它工作得很好。当我添加一个道具时，它就停止工作并显示以下内容：

Argument of type 'FunctionComponentElement<{ message: string | undefined; }>' is not assignable to parameter of type 'ReactElement<DocumentProps, string | JSXElementConstructor<any>>'.
  Types of property 'props' are incompatible.
    Type '{ message: string | undefined; }' has no properties in common with type 'DocumentProps'.ts(2345)

如果我将 TestPDF 添加为这样的组件：

let stream = await renderToStream(<TestPDF message={message} />)

它这样说：

'TestPDF' refers to a value, but is being used as a type here. Did you mean 'typeof TestPDF'?

所以这似乎也不是解决方案。

Answer 1

确保您调用

let stream = await renderToStream(<TestPDF message={message} />)

的文件具有

.tsx

扩展名。如果文件具有

.ts

扩展名，您将收到错误：

'TestPDF' refers to a value, but is being used as a type here. Did you mean 'typeof TestPDF'

？

根据经验：

1. 对仅包含 TypeScript 的文件使用 .ts。
2. 对包含 JSX 的文件使用 .tsx。