Articles of reactjs

我如何将Facebook爬虫机器人redirect到另一个网页?

我已经开发了由PreactJS完成的小网站,它有一些主要网站的部分(PHP)。 众所周知,Facebook bot在共享时无法抓取javascript预渲染内容。 这就是为什么我要redirect为让Facebook的机器人抓取主要网站(PHP),同时分享由NodeJS / ExpressJS PrePreJJS完成的网站链接如下: 如果用户像“ https://www.mywebsite.com/category/trips/10 ”共享,我想要nodejs / expressredirect“ https://main.mywebsite.com/category/trips/10 ”。 谁能告诉我,我怎么能这样expressjs级别如下: app.use('/*', function(req, res){ if(req.headers['user-agent'] === 'facebookexternalhit/1.1') { } });

Passport.js – 将数据发回到react / redux应用程序,同时在login后redirect

我正在创build一个React / Redux应用程序,并且是使用Node / Express和Passport身份validation设置后端的新手。 我想要发生的是用户login,凭据被检查,如果用户从数据库中find,redirect用户到下一页,并返回用户的信息,所以我可以更新减速机。 我的端点login工作,因为我能够访问req.user对象,并获得成功身份validation后正确的用户信息。 我被卡住的地方是将用户redirect到另一个页面,同时也传递该用户的信息,所以我可能会更新REDX存储。 编辑:所以我通过发送authentication后的用户信息更新响应以及下一个redirect用户的路线。 由于我使用的是redux,我执行login操作,一旦得到响应,我redirect用户window.location。 这部分解决了我的问题,即使我login后redirect,我相信,更新window.location后,我的redux商店得到刷新,我失去了我抓住服务器端的任何信息。 app.post('/api/login', passport.authenticate('local-login', { failureRedirect: '/login'}), (req, res) => { res.json({ redirect: '/profile userInfo: req.user.dataValues}) }) }) export const login = (email, password) => { return(dispatch) => { axios .post('/api/login', { email: email, password: password }) .then(resp => { dispatch({ type: 'LOGIN_USER', data: resp.data }) […]

如何让我的deserializeUserfunction在护照login后不断运行?

我用我的用户身份validation有一些麻烦。 我可以login,注册和注销,您可以从客户端认为一切都很好。 但是,我的反序列化用户函数被重复调用。 每秒几十次。 我最初并没有注意到,但是如果你login了足够长的时间,应用程序真的变慢了。 我似乎无法弄清楚。 任何帮助将不胜感激。 另外,我试过在user.js文件的末尾运行client.end(),但是这并没有解决问题。 我想知道这是不是一个交叉来源的问题。 -UPDATE – 我不怀疑这是一个CORS问题,因为我刚刚尝试从服务器端口上的静态HTML文件login,问题依然存在。 *在与服务器不同的端口上运行的前端进行响应。 Node,Express和Postgres在服务器端。 app.js const express = require('express'), app = express(), bodyParser = require('body-parser'), cookieParser = require('cookie-parser'), expressValidator = require('express-validator'), passport = require('passport'), session = require('express-session'); require('dotenv').config(); let port = process.env.PORT || 5000; app.use((req, res, next) => { res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); […]

React / Webpack / Express渲染服务器端的问题

我试图将服务器端渲染到我现有的React / Redux应用程序中。 几次失败的尝试后,我想我几乎在那里,但我遇到了几个问题。 我对React / Redux / Express / Webpack相当陌生,所以如果我犯了一些愚蠢的错误,我很抱歉! 问题1 – 窗口未定义 当我使用Redux时,我需要跟踪初始状态并将其加载到我的应用程序中。 内部server/index.js我从商店获取初始状态,并使用window.__initialData__ = ${serialize(initialData)}存储在window.__initialData__ = ${serialize(initialData)} 。 服务器代码如下: import express from 'express'; import React from 'react'; import { renderToString } from 'react-dom/server'; import { Provider } from 'react-redux'; import { StaticRouter, matchPath } from 'react-router-dom'; import serialize from 'serialize-javascript'; import routes […]

可以编写道具来覆盖react-redux中的connect()吗?

我负责重构使用ReactJS / Redux过度使用不需要的dependency injection。 依赖关系在JSX标记中使用道具注入,如下所示: <CardContainer addCountry={actions.addCountry} addDateRange={actions.addDateRangeFilter} addDistributor={actions.addDistributor} addListFilterItem={actions.addListFilterItem} addListFilterWithOneItem={actions.addListFilterWithOneItem} {/* …other props removed for brevity */} /> 这些道具在整个代码库(以及像这样的多个组件)的几个地方重复使用。 我正在经历并取消将这些函数作为道具传递给CardContainer类,并使用connect() (来自react-redux npm包)的地方,如下所示: export default connect(undefined, dispatch => ({ actions: bindActionCreators(MyActions, dispatch), }))(class DistributorFilterPaneCards extends Component { static propTypes = { addCountry: PropTypes.func, addDateRange: PropTypes.func, addDistributor: PropTypes.func, addListFilterItem: PropTypes.func, addListFilterWithOneItem: PropTypes.func, 我发现,虽然很less有一个道具,例如, addCountry ,它通过了一个不同于所有其他的function。 基本上,我想连接()像静态defaultProps对象工作。 […]

React.js:在组件中使用节点js模块?

在我的组件我需要一个模块ipcRenderer。 我试图得到它: const {ipcRenderer} = require('electron') console.log(ipcRenderer) 但结果是: [1] ERROR in ./node_modules/electron/index.js [1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\steko\Desktop\DEV\crab\node_modules\electron' [1] @ ./node_modules/electron/index.js 1:9-22 [1] @ ./src/components/PageCatalogLinks.jsx [1] @ ./src/components/ContentBlock.jsx [1] @ ./src/index.jsx 怎么修? 我试图添加一个模型FS,但他已经是。

父React应用程序li​​nting编译通过`npm link`连接的依赖代码

我有一个React应用程序,它依赖于我创build的库中的另一个React组件。 当我在Parent上运行构build脚本,并通过npm install依赖项时,父应用程序中不会创build依赖项。 但是,当我运行npm link所以我可以在本地开发组件,并让我的父应用程序运行它的构build脚本,由于它正在linting传输代码的依赖项,它失败。 任何想法为什么发生这种情况? UPDATE 这似乎与最终捆绑结束的目录名称有关。 我把它命名为bin 。 通过npm文档阅读看来, npm link为模块的目录以及bin目录(如果有的话)创build了一个符号链接。 我只是把名字改成了dist ,并解决了这个问题。 不是最好的答案,但希望它可以帮助处于同样情况的人。

如何在容器特定的scss中包含bootstrap?

我正在努力升级到reactstrap &bootstrap的最新版本,我曾经有:reactstrap在我的package.json和bootstrap SCSS下载在我的客户端/ src / styles / bootstrap目录中。 我现在有在我的package.json: "reactstrap": "^5.0.0-alpha.3", "bootstrap": "^4.0.0-beta", 对于我的容器和组件特定的SCSS文件,这用于工作: home.jsx: import '../styles/home/Home.css' home.scss @import "../bootstrap/variables"; @import "../bootstrap/custom"; @import "../bootstrap/mixins/breakpoints"; @include media-breakpoint-down(sm) { … } 新的reactstrap和引导程序不再提供这些@import文件。 如何导入引导项目,如@import "../bootstrap/mixins/breakpoints"; bootstrap/ @import "../bootstrap/mixins/breakpoints"; ? 还是我做这一切都错了? 谢谢

反应组件压力模块错误

我正在尝试安装react-vis-force模块,但无法正常工作。 我编辑了package.json来安装'react-vis-force'vs 0.3.1 但是我遇到了错误。 无法从node_modules / react-vis-force / dist中find模块“./factoryWithTypeCheckers” 我怎样才能解决这个问题?

我怎样才能从数据库中得到正确的数据呢?

我使用nodejs + react + redux做了一个页面。 我在页面中做了一个编辑button,并想编辑我的数据。 现在我selectKUMAMOTO-CTI并将优先级从5更改为10.我使用ajax从数据库获取数据以填充空白。在提交之前,我可以从数据库中获得正确的数据。但是,当我改变优先级并单击编辑它填充的数据将是错误的,我必须刷新它,以获得正确的数据。 有时它会变成这样: 错误 有谁能告诉我如何解决? 这是pic: progress 这是我的代码。 server.js const Koa = require('koa') const Router = require('koa-router') const cors = require('koa2-cors') const app = new Koa() const router = new Router() import { createStore } from 'redux' import { Provider } from 'react-redux' import serversReducer from '../client/reducers/reducer' import { renderToString […]