React Native中如何将状态变量传入HTML字符串以生成PDF？

嘿，刚接触React Native遇到这个问题很正常，我来帮你捋清楚怎么搞定！

首先你代码里有两个小细节得先修正：

• 拼写错误：this.sate.mobileNumber里的sate应该是state
• 模板字符串嵌入变量的方式不对：你用了{this.state.name}，但在ES6模板字面量（反引号`包裹的字符串）里，变量需要用${变量}的格式才能被正确解析。

类组件的修正方案 #

如果你的组件是类组件，修改后的htmlString应该是这样的：

const htmlString = `
  <h1>Name: ${this.state.name}</h1>
  <h2>Mobile number: ${this.state.mobileNumber}</h2>
  <img src="https://www.gstatic.com/webp/gallery/1.jpg" />
`;

这样模板字符串就会自动把this.state里的变量值替换进去，生成包含真实数据的HTML内容。

函数组件的修正方案 #

如果是用函数组件+useState的写法，代码会更简洁：

import { useState } from 'react';

// 组件内部
const [name, setName] = useState('');
const [mobileNumber, setMobileNumber] = useState('');

const htmlString = `
  <h1>Name: ${name}</h1>
  <h2>Mobile number: ${mobileNumber}</h2>
  <img src="https://www.gstatic.com/webp/gallery/1.jpg" />
`;

直接把状态变量用${}嵌入模板字符串就能生效。

生成PDF的后续步骤 #

当你得到正确的HTML字符串后，常用的生成PDF库比如react-native-html-to-pdf，用法大概是这样（以类组件为例）：

import RNHTMLtoPDF from 'react-native-html-to-pdf';

// 比如在按钮点击事件里触发PDF生成
const generatePDF = async () => {
  const options = {
    html: htmlString,
    fileName: 'user-info',
    directory: 'Documents',
  };

  const file = await RNHTMLtoPDF.convert(options);
  console.log(file.filePath); // 生成的PDF文件路径
};

记得先通过npm或yarn安装这个库：npm install react-native-html-to-pdf --save，然后按照库的文档完成iOS和Android的原生配置就可以用了。

这样就能顺利把状态变量的数据嵌入HTML，再生成包含动态内容的PDF啦！

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