Tag: 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应用程序linting编译通过`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 […]
