react-pdf组件中调用Redux状态失败的问题求助

问题根源 #

react-pdf的<PDFViewer>和<PDFDownloadLink>组件渲染机制特殊：

• <PDFViewer>内部默认会创建独立的iframe渲染PDF内容，iframe里的React组件树不在你全局<Provider>的上下文范围内
• <PDFDownloadLink>生成PDF时，会在内存中独立渲染传入的document组件，同样脱离了原Redux上下文

这就是为什么其他组件能正常使用Redux，只有这两个容器内的组件触发could not find react-redux context value错误。

解决方法 #

方法1：状态提升，通过props传递数据（最推荐） #

在父组件InfoBoard中先获取Redux状态，再通过props传给ConfigurationListPdf，避免在子组件中直接使用Redux hooks：

// 修改InfoBoard组件
export default function InfoBoard(){
    const styles = StyleSheet.create({
        page: { flexDirection: 'row' },
        section: { margin: 10, padding: 10, flexGrow: 1 }
    });
    // 父组件内获取Redux状态
    const mech = useSelector(mechConfig);

    return(
        <>
            <CntrInfoBoard>
                <InnerBoard>
                    {/* 其他原有代码不变 */}
                    <PDFViewer>
                        {/* 通过props传递状态 */}
                        <ConfigurationListPdf mech={mech} elem={...} />
                    </PDFViewer>
                    <CntrSaveBtn>
                        {/* ... */}
                        <BtnOther onClick={savePdfHandler}>
                            <PDFDownloadLinkStyled
                                {/* 同样传递状态 */}
                                document={<ConfigurationListPdf mech={mech} elem={...} />}
                                fileName="example.pdf"
                            >
                                Download PDF
                            </PDFDownloadLinkStyled>
                        </BtnOther>
                    </CntrSaveBtn>
                </InnerBoard>
            </CntrInfoBoard>
        </>
    )
}

// 修改ConfigurationListPdf组件，移除useSelector
const ConfigurationListPdf = (props)=>{
    const { mech, elem } = props;
    return(
        <>
            <Document>
                <Page size="A4" style={styles.page}>
                    <View style={styles.section}>
                        <Text>{elem}</Text>
                        {/* 直接使用props传递的状态 */}
                        <Text>{mech.someProperty}</Text>
                    </View>
                </Page>
            </Document>
        </>
    )
}

方法2：手动给react-pdf组件包裹Provider #

如果必须在ConfigurationListPdf中使用Redux hooks，需要手动将它包裹在<Provider>中，确保使用同一个全局store实例：

首先导入你的Redux store：

// 假设store文件路径为src/store/index.js
import store from '../store';

然后修改ConfigurationListPdf或使用它的地方：

import { Provider } from 'react-redux';
import store from '../store';

// 方式1：在ConfigurationListPdf内部包裹
const ConfigurationListPdf = (props)=>{
    const mech = useSelector(mechConfig);
    return(
        <Provider store={store}>
            <Document>
                <Page size="A4" style={styles.page}>
                    <View style={styles.section}>
                        <Text>{props.elem}</Text>
                    </View>
                </Page>
            </Document>
        </Provider>
    )
}

// 方式2：在使用时包裹
<PDFViewer>
    <Provider store={store}>
        <ConfigurationListPdf />
    </Provider>
</PDFViewer>

方法3：自定义PDFViewer渲染逻辑（进阶） #

如果<PDFViewer>的iframe是问题核心，可以通过renderer prop自定义渲染逻辑，确保iframe内的组件树被Provider包裹。不过这个方法复杂度较高，一般前两种方法足够解决问题。

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