将本机传递状态/道具值反应到自定义 <html> 页面？答案

【问题标题】：React native pass state/props value to custom <html> page?将本机传递状态/道具值反应到自定义 <html> 页面？
【发布时间】：2022-01-24 16:36:00
【问题描述】：

我需要在 react native 中使用 html 创建一个 pdf 发票。为此，我正在使用
'react-native-html-to-pdf'。实际上 pdf 正在成功创建。但我担心的是我需要将这些值从状态传递到硬编码的 html 标记。到目前为止，我已经在标签内硬编码了一些值。但是我需要传递我的状态值而不是那个。（要清楚地知道，请参阅代码中的注释）有没有办法做到这一点？

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

this.state = {
  Balance: 100,
  Total: 200,
  Amount: 400,
};

onPressRequestButton = async () => {
  const html = `<html>
    <head>
        <meta charset="utf-8">
        <title>Invoice</title>
        <link rel="stylesheet" href="style.css">
        <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
        <script src="script.js"></script>
    </head>
    <body>
        <header>
            <span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
        </header>
        <article>
            <h1>Recipient</h1>
            <table class="balance">
                <tr>
                    <th><span contenteditable>Total</span></th>
                    <td><span data-prefix>$</span><span>600.00</span></td> // here i need to set total amount {this.state.amount} is not working at all.
                </tr>
                <tr>
                    <th><span contenteditable>Amount Paid</span></th>
                    <td><span data-prefix>$</span><span contenteditable>600.00</span></td>
                </tr>
                <tr>
                    <th><span contenteditable>Balance Due</span></th>
                    <td><span data-prefix>$</span><span>600.00</span></td>
                </tr>
            </table>
        </article>
    </body>
    </html> `;

  let options = {
    html: html,
    fileName: "test",
    directory: "Documents",
  };

  let file = await RNHTMLtoPDF.convert(options);
  alert(file.filePath);
};

【问题讨论】：

试试${this.state.amount}

标签： android ios react-native pdf html-to-pdf

【解决方案1】：

这是解决方法

onPressRequestButton = async () => {
  const Balance = this.state.Balancel;
  const Total = this.state.Total;
  const Amount = this.state.Amount;
  const html =
    `
<html>
   <head>
      <meta charset="utf-8">
      <title>Invoice</title>
      <link rel="stylesheet" href="style.css">
      <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
      <script src="script.js"></script>
   </head>
   <body>
      <header>
         <span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
      </header>
      <article>
         <h1>Recipient</h1>
         <table class="balance">
            <tr>
               <th><span contenteditable>Total</span></th>
               <td><span data-prefix>$</span><span>` +
    Total +
    `</span></td>
               // here i need to set total amount {this.state.amount} is not working at all.
            </tr>
            <tr>
               <th><span contenteditable>Amount Paid</span></th>
               <td><span data-prefix>$</span><span contenteditable>` +
    Balance +
    `</span></td>
            </tr>
            <tr>
               <th><span contenteditable>Balance Due</span></th>
               <td><span data-prefix>$</span><span>` +
    Amount +
    `</span></td>
            </tr>
         </table>
      </article>
   </body>
</html>
`;
  let options = {
    html: html,
    fileName: "test",
    directory: "Documents",
  };
  let file = await RNHTMLtoPDF.convert(options);
  alert(file.filePath);
};

【讨论】：