如何在React-pdf中动态渲染多个<Text>组件？

你的代码有两个核心问题导致PDF渲染空白：

• 组件接收props的方式错误：React函数组件的第一个参数是props对象，你直接把mainArray当参数，实际拿到的是整个props对象而非目标数组。
• 错误使用View组件的属性：react-pdf的<View>没有render这个props，这是完全不符合组件规范的写法，直接导致渲染失败。

修正后的代码 #

// 正确解构props并指定类型（建议替换any[]为实际元素类型）
const MyDocument = ({ mainArray }: { mainArray: any[] }) => {
    return (
        <Document>
            <Page size="A4" style={styles.body}>
                <View style={styles.section}>
                    <Text style={styles.title}>Don Quijote de la Mancha</Text>
                </View>
                {/* 改用和硬编码一致的写法，直接在View内渲染动态内容 */}
                <View style={styles.section}>
                    {/* 严谨判断数组存在且有内容，避免空渲染 */}
                    {mainArray?.length > 0 && mainArray.map((_, index) => (
                        {/* 添加唯一key，避免React渲染警告 */}
                        <Text key={index} style={styles.text}>
                            asdasdasdadsdads
                        </Text>
                    ))}
                </View>
                {/* 硬编码部分保持不变 */}
                <View style={styles.section}>
                    {[1,2,3,4].map((_, index) => (
                        <Text key={index} style={styles.text}>
                            asdasdasdadsdads
                        </Text>
                    ))}
                </View>
                <View style={styles.section}>
                    <Text>Section #2</Text>
                </View>
                <View style={styles.section}>
                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );
}

关键修改说明 #

1. 修正props接收逻辑：通过对象解构({ mainArray })正确获取传入的数组，同时给props指定类型提升代码规范性。
2. 移除错误的render属性：react-pdf组件仅通过子元素渲染内容，直接在<View>内部编写动态JSX即可，和硬编码数组的写法保持一致。
3. 添加key属性：去掉ESLint禁用注释，给每个循环生成的<Text>添加唯一key，符合React渲染要求。
4. 优化数组判断：用mainArray?.length > 0替代简单的存在性判断，避免数组为空时渲染无效内容。

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