第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在Node腳本中使用React組件?

如何在Node腳本中使用React組件?

慕桂英3389331 2021-03-29 17:18:57
我目前正在嘗試使用react-pdf來生成pdf并將其保存到磁盤。渲染到網(wǎng)頁是可行的,但是我需要調(diào)用將pdf保存到光盤的方法,    ReactPDF.render()在我過去用來創(chuàng)建網(wǎng)頁的運(yùn)行React的npm start(react-scripts)方式下不起作用。從閱讀此問題開始,似乎需要將其作為“僅節(jié)點(diǎn)api”運(yùn)行。所以我的問題是,我需要采取哪些依賴關(guān)系,命令和步驟來運(yùn)行一些反應(yīng)代碼并將pdf文件保存到磁盤,例如   > node index.js當(dāng)前,當(dāng)我運(yùn)行上述命令時,我得到import React from 'react';       ^^^^^SyntaxError: Unexpected identifier然后,跑步    node --experimental-modules index.mjs我懂了ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);                ^SyntaxError: Unexpected token <這是我的兩個文件:index.js    import React from 'react';    import ReactDOM from 'react-dom';    import './index.css';    import App from './App';    import ReactPDF from '@react-pdf/renderer';    ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);    //ReactDOM.render(<App />, document.getElementById('root'));App.jsimport React, { Component } from 'react';import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'class App extends Component {  render() {    const styles = StyleSheet.create({      page: {        flexDirection: 'row',        backgroundColor: '#E4E4E4'      },      section: {        margin: 10,        padding: 10,        flexGrow: 1      }    });    return (      <Document>        <Page size="A4" style={styles.page}>          <View style={styles.section}>            <Text>Section #1</Text>          </View>          <View style={styles.section}>            <Text>Section #2</Text>          </View>        </Page>      </Document>    );  }}export default App;package.json{  "name": "ccv-generator-react",  "version": "0.1.0",  "private": true,  "dependencies": {    "@react-pdf/renderer": "^1.4.2",    "react": "^16.8.5",    "react-dom": "^16.8.5",    "react-scripts": "2.1.8",    "ts-pnp": "^1.0.1",    "typescript": "^3.3.4000"  },  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"  },  "eslintConfig": {    "extends": "react-app"  },后續(xù)問題將是,我正在嘗試做反模式嗎?
查看完整描述

1 回答

?
繁星coding

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個贊

由于您是index.mjs直接從node運(yùn)行的,因此它不會經(jīng)歷的構(gòu)建和編譯過程react-scripts,這意味著您必須手動進(jìn)行操作。


Node無法直接解析jsx(<App/>例如,)-因此您需要通過Babel使用React預(yù)設(shè)來運(yùn)行代碼才能運(yùn)行它。


由于應(yīng)該已經(jīng)安裝了依賴項(xiàng),因此請嘗試運(yùn)行:


npx babel index.mjs -o index-compiled.js --presets=es2015,react

然后運(yùn)行編譯的文件:


node index-compiled.js


查看完整回答
反對 回復(fù) 2021-04-08
  • 1 回答
  • 0 關(guān)注
  • 242 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號