Tag: reactjs

将反应组件转换为html: 我有一个包含地图的反应组件（使用反应传单）。我正在试图在客户端截图（使用html2canvas ），将其转换为HTML，然后将其发送到我的NodeJS服务器来创buildPDF（使用html-pdf ）。问题是地图从外部URL加载它的瓷砖，所以当我尝试截图时，我得到一个空白的背景。这里是我想要截图的组件：反应地图组件 PDF格式的结果如下：截图图片我用过的代码：在客户端： // mapComponent is a div containing the component of the map. let input = document.getElementById('mapComponent'); html2canvas(input) .then((canvas) => { let imgData = canvas.toDataURL('image/png'); sendAjaxRequest(imgData); }); 在服务器上： let html = '<!DOCTYPE html><html><head></head><body><div>' + '<img src="' + imgData + '">' + '</div></body></html>'; let options = […]

在创build反应应用程序项目上进行快速身份validation: 我正在开发一个带有Express后端的简单项目和一个使用create-react-app引导的前端： my-project |- server.js # backend entry point |- client/ |– package.json # client package.json |– index.js # client entry point 遵循一些指导（如这样），我现在有一个localhost:3001上的后端服务工作，并且在localhost:3000上有一个工作的前端服务。所有对/api/myapi的API调用都通过代理服务器成功redirect到端口3001。在我的客户端package.json中： "proxy": "http://localhost:3001/", 现在，一切工作正常，但我有困难的时间使login工作。事实上，当他访问/login url时，我无法将用户redirect到login页面。在我的server.js文件里面： app.get('/login', function(req, res) { res.send('This is the login page'); }); 这是根本不工作，而URL /login给我一个空白页，而不是（它看起来不是在端口3001）。由于这是我第一次使用Express，所以有人可以这样解释我为什么不工作？

抓取POST仅在Express API服务器React FrontEnd中返回_id对象: 我试图做一个React-Node.js应用程序的实践。我在发送POST请求时遇到了一个问题。当我在App.js中获取POST请求时，它只返回id。我预计它会返回3个更多的值。当前对象 { _id: 5a046d52bb5d37063b3c8b21 } 理想的对象 {_id: "59e9fed60fe8bf0d7fd4ac6e", name: "recipe1", ingredients: "apple", descriptions: "cut an apple"} 我应该如何正确地将值添加到req.body？我提到这个解决scheme使用反应js和expressionAPI服务器提取对象，但它不适用于我的应用程序。 index.js（node.js） const express = require('express'); const path = require('path'); const bodyParser = require('body-parser'); const app = express(); // Serve static files from the React app app.use(express.static(path.join(__dirname, 'client/build'))); app.use(bodyParser.urlencoded({ extended: true})); var db const […]

将Webpack添加到现有的React应用程序: 所以我使用create-react-app构build了第一个应用create-react-app 。它默认使用npmbuild设，本地运行等… 我想要做的是转移到使用Webpack，但不打破现有的设置，并做了一些谷歌search，但没有开始，一步一步地走，所以我可以更好地感受它正在做什么，去哪里。也希望也使用webpack-dev-server合并。这就是说，我希望你们有一些build议，也许还指出了一些很好的教程，为这个前进？非常感谢。

如何利用节点后端的浏览器库: 我正在开发一个服务器端渲染的React应用程序。在客户端中，我使用的是使用文档对象的库，所以当我尝试在服务器端节点上运行我的代码时，崩溃，因为文档没有在该环境中定义。我目前正在通过手动检查文档对象是否存在来解决这个问题，并且只有在定义了文档的情况下才导入浏览器特定的库，但是这在我看来是一个非常草率和不方便的解决scheme。有谁知道更好的方法来解决这个问题？

标记导航栏在Reactjs中不起作用: 我仍然是新的JavaScript特别是reactjs。创build网页标题时遇到问题。我想把菜单放在右边，我用。但它不起作用，菜单停留在左侧。我正在使用布尔玛的CSS。谁能帮忙？ import React, { Component } from 'react'; import './Header.css'; import { Link } from 'react-router-dom'; class Header extends Component { render() { return ( <div className="nav has-shadow"> <div className="container"> <div className="nav-left"> <a className="nav-item">MyCompany</a> </div> <span className="nav-toggle" > <span></span> <span></span> <span></span> </span> <div className="nav-right nav-menu"> <Link to="/" className="nav-item r-item">Home</Link> <Link […]

在React应用程序中找不到包含npm包的模块: 我有一个从API获取一些数据的React应用程序。数据是过境数据，并与协议缓冲区序列化，所以我使用gtfs-realtime-bindings.js包来反序列化它。这也使用了ProtoBuf.js和ByteBuffer.js。但是，当我运行我的开发服务器，我在浏览器中得到这个错误： ./node_modules/protobufjs/ProtoBuf.js Module not found: `/Users/Ben/React/subway- checker/node_modules/ByteBuffer/ByteBuffer.js` does not match the corresponding path on disk `bytebuffer`. 我真的不知道如何开始debugging。这可能是一个Webpack的问题？如果有帮助诊断，我正在使用create-react-app。对于上下文，下面是导致错误的文件中的其余代码：从'gtfs-realtime-bindings'导入GtfsRealtimeBindings; 从“请求”导入请求; function getFeedData (sub) { var feedId; switch (sub) { case '1' || '2' || '3' || '4' || '5' || '6' || 'S': feedId = 1; break; case 'A' || […]

不同版本的反应和React本机会导致循环依赖: 我有一个关于版本约束的问题。首先，我试图安装npm i react-native-message-bar –save 但是后来我得到了一个UNMET PEER DEPENDENCY react@16.1.0 Unmet Peer dependency ： UNMET PEER DEPENDENCY react@16.1.0 所以我做了： npm install react@16.1.0但是我得到了： UNMET PEER DEPENDENCY react@16.1.0 npm WARN react-native@0.50.3 requires a peer of react@16.0.0 but none was installed. 所以我有这样的感觉，我正在运行到循环依赖。这是否意味着我无法使用react-native-message-bar 。与当前版本的反应？我想就如何解决这个问题提出一些build议。

React Dev环境创build一个新的Session: 当我将React构build部署到NodeJS中时，我有一个简单的NodeJS＆React Web应用程序。当我点击login时，服务器将检查授权并redirect到另一个页面。当我尝试从React构build（端口3000）运行webapp时，我注意到一旦login，我有一个新的会话，因此从服务器（端口8080）获取数据将无法正常工作。 https://github.com/Yanipo5/MenuCreator NodeJS – loginApi（路由到url将工作）; router.post('/',approveUserPassword, function(req, res){ console.log(new Date() + ":" + req.sessionID) if(req.session.auth){ let url = 'http://localhost:3000/edit-menu'; res.redirect(url); } }); function approveUserPassword(req, res, next) { let email = req.body.email; let psw = req.body.psw; let query = "SELECT id FROM Users " + "WHERE email= '" + email + "' AND […]

找不到模块：'cldr'在… \ globalize \ dist \ globalize中: 在我的React应用程序中，我试图使用react-widgets包中包含的DateTimePicker组件。我也通过reactstrap使用Bootstrap 4组件。我已经安装了这些模块： npm install –save bootstrap@4.0.0-beta reactstrap@next npm install –save globalize react-widgets-globalize 但是当我尝试使用DateTimePicker组件时： import Globalize from 'globalize' import globalizeLocalizer from 'react-widgets-globalize' import { DateTimePicker } from 'react-widgets' class Foo extends Component { render() { Globalize.locale('en') globalizeLocalizer() let formatter = Globalize.dateFormatter({ raw: 'MMM dd, yyyy' }) return( <div> <DateTimePicker format={formatter} defaultValue={new Date()} time={false} /> […]