基于react 制作一个简易的打印模板

首先，需要安装React和React-DOM。可以在命令行中输入以下命令：

npm install react react-dom --save

然后，创建一个名为“PrintTemplate.js”的组件。在这个组件中，我们可以定义我们的打印模板。

import React from 'react';

function PrintTemplate(props) {
  return (
    <div className="print-template">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

export default PrintTemplate;

在这个例子中，我们定义了一个带有标题和内容的简单模板。现在我们需要在我们的应用程序中使用它。

import React from 'react';
import ReactDOM from 'react-dom';
import PrintTemplate from './PrintTemplate';

function App() {
  return (
    <div>
      <PrintTemplate title="标题" content="内容" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们将PrintTemplate组件嵌套在App组件中，然后将其呈现在DOM中。现在，如果我们运行应用程序，我们将看到我们的打印模板。

如果你想打印这个模板，你可以使用window.print()方法。例如：

function handlePrintClick() {
  window.print();
}

return (
  <div>
    <PrintTemplate title="标题" content="内容" />
    <button onClick={handlePrintClick}>打印</button>
  </div>
);

现在，当用户点击打印按钮时，浏览器将显示打印预览并允许用户打印页面。