Articles of reactjs

同构反应与Webpack的resolve.root选项

我的React应用程序使用需要相对于我的JS文件的根,使用Webpack的resolve.root。 即我的文件结构包含以下内容: components App.react.js containers AppContainer.react.js 在AppContainer.react.js中,我有: import App from 'components/App.react'; 这在客户端工作。 现在我试图使它是同构的。 如果我在我的server.js需要AppContainer.react.js,它说components/App.react没有find。 节点正试图要求containers/components/App.react.js ,它不存在。 我怎样才能使Node相对于给定的目录? 编辑:我的目录结构如下所示: css/ html/ js/ components/ App.react.js containers/ AppContainer.react.js main.js <- requires AppContainer public/ server/ server.js <- requires AppContainer

在iis上运行反应同构

我正在尝试使用iis上的iisnode使用node.js来运行反应 我已经安装了最新的节点和最新的iisnode,并使用这个stackoverflow作为指导,但不能得到错误500. 如何运行Node.JS服务器的Web应用程序? 有关如何在iis上做这个的指南?

Webpack,开发中间件和静态文件

我有一个Web服务/ React / Redux项目与快递服务,我有一些麻烦理解他们如何融合在一起。 我的快车应用程序运行Webpack并提供我的根index.html文件,如下所示: const app = express(); const server = require("http").createServer(app); app.use(bodyParser.json()); app.use("/some/path", express.static(path.join(__dirname, "/public"))); // webpack middleware const compiler = webpack(webpackConfig); const webpackDevMid = require("webpack-dev-middleware"); const webpackHotMid = require("webpack-hot-middleware"); app.use(webpackDevMid(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath // '/static/' })); app.use(webpackHotMid(compiler)); app.get("/", (req, res) => { if (!req.cookies.access_token) return res.redirect("/login"); return res.sendFile(path.join(__dirname, "index.html")); }); […]

Node.js:如何序列化/反序列化React组件?

我想序列化一个React元素(给予道具的React组件的一个实例)并在别处反序列化它。 你为什么问? 我希望能够通过stdout从一个进程发送该类,并将其呈现在另一个进程中。 我也希望渲染的组件是交互式的,所以只需使用ReactDOM.renderToString()将不足以… 我试过了: 将其序列化为string并使用eval()进行反序列化 使用自定义JSON.stringify()并分别为JSON.stringify()和JSON.parse()函数 MyReactComponent.toString()返回: "function MyReactClass() { _classCallCheck(this, MyReactClass); _get(Object.getPrototypeOf(MyReactClass.prototype), 'constructor', this).apply(this, arguments); }" 它不包含我的组件特有的任何方法(比如render()或constructor() )。 在JS Bin中查看这个示例代码: http : //jsbin.com/febuzupicu/edit? js,console, output

Webpack HMR抛出响应由于jsPDF造成的syntheticEvent错误

系统信息: OSX 10.12.4 Sierra Node v7.10.0 npm v4.2.0 浏览器已testing: Chrome 58.0.3029.110 Safari 10.1 Firefox 53.0 问题: 我有一个应用程序在我已经克隆的生产中有效地运行,并且正在尝试更新以准备构build续作。 但是,我已经遇到了一个奇怪的Webpack问题,通过更新它/ React / HMR到更新的版本。 HMR将连接,并且Webpack似乎编译得很好。 但是,与页面交互(如单击)会生成以下错误: 显然,该应用程序在这一点上不再起作用,因为点击事件不会引发任何事情。 有趣的是,我们在Node控制台和浏览器中也得到了以下404错误: (注:这似乎是一个巨大的查询string,包括函数,特别是引用syntheticEvent。如果你愿意,我可以打印整个东西) NODE v6.3.1 相关的NPMs: "react": "^15.5.4", "react-dom": "^15.5.4", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.4", "webpack": "^2.5.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" "babel-cli": "^6.11.4", "babel-core": "^6.24.1", "babel-eslint": "^7.2.1", "babel-loader": "^7.0.0", "babel-plugin-array-includes": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.0.0", […]

Uncaught TypeError:(0,_reactRouter.withRouter)在react-router 2.4.0中编程路由导航时不是函数

我正在使用react-router 2.4.0并想以编程方式链接到另一个路由(我使用<Link>之前做了什么)。 在这个SOpost里很好的解释了他们在2.4.x说你应该在withRouter使用装饰器模式,所以我使用下面的代码: import {withRouter} from 'react-router' // further imports omitted class CreateJobItemFormRaw extends React.Component { … } const CreateJobItemForm = withRouter(CreateJobItemFormRaw) export default CreateJobItemForm 然后在其他文件中,我使用 import CreateJobItemForm from './CreateJobItemForm' 但是,使用这种方法,我的应用程序不再渲染和控制台输出: CreateJobItemForm.js:76 Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function 谁能帮我解决这个问题吗?

React组件视图不会更新

我有一个React组件pipe理列表中的多个手风琴,但是当我更新一个孩子,在React开发工具,它显示更新的文本,但在视图/用户界面,它不更新。 请指教。 var AccordionComponent = React.createClass({ getInitialState: function() { var self = this; var accordions = this.props.children.map(function(accordion, i) { return clone(accordion, { onClick: self.handleClick, key: i }); }); return { accordions: accordions } }, handleClick: function(i) { var accordions = this.state.accordions; accordions = accordions.map(function(accordion) { if (!accordion.props.open && accordion.props.index === i) { accordion.props.open = true; […]

酶如果React组件需要jQuery,则会引发错误

我试图用Enzyme的describeWithDOM()和mount()来testing一个React组件的行为。 但是,当组件导入jQuery我得到这个错误: 错误:jQuery需要一个包含文档的窗口 我知道Enzyme使用引擎盖下的jsdom,我一直以为jsdom照顾窗口和文件。 但我似乎无法find如何让这些工作在一起。 testing代码如下所示: import chai, {expect} from 'chai'; import Select from './Select'; import React, {createElement} from 'react'; import {describeWithDOM, mount} from 'enzyme'; describe('UI Select', () => { //more shallow tests here describeWithDOM('User Actions', () => { it('Toggles the .ui-options menu on button click', () => { const wrapper = mount(<Select {…baseProps} />); […]

所有的testing都运行完毕之后再进行清理

是否有可能在Jest运行完成所有其他testing后运行的清理或拆卸任务? 与setupFiles允许在运行任何testing之前设置任务类似。 如果这也可以运行,不pipetesting是否有任何错误,奖励点。 将afterAll(() => {})置于文件顶层(在任何describe函数之外)时,只会在完成特定文件的testing后才运行。 这个用例是我有许多testing文件将在一个开发数据库中创build用户,我不想让每个testing文件负责清理和删除用户。 编写testing时也可能发生错误,所以如果清理发生而不pipe错误是否会更好。

如何使用Auth0 Lock来pipe理后端用户?

我正在用React创build一个前端,用Node创build一个后端。 我想用Auth0 Lock来pipe理用户信息 – 发送一个包含每个请求的JWT给API。 如果我需要做以下的事情之一呢? 存储一个带有作者ID的博客文章 Auth0唯一标识符是user_id ,它不是一个整数,因此不能用作ID /密钥。 我将如何处理这在服务器端用户商店? 有一个用户表来存储“个人资料”或其他类似的信息 是否在每个API请求上阅读JWT,确定该用户是否存在,然后创build一个新用户(如果不存在),或者将其与预先存在的用户关联(如果存在)。 是否高效地检查每个API请求上的用户数据库? 我不确定如何使用基于JWT的API和Auth0处理一般stream程。 编辑: 经过一番研究和思考,我的想法是:Auth0的唯一用户标识符是由它们提供的user_id 。 这里的问题是它不是一个整数。 因此它不应该被用作数据库中users表的键。 看起来好像你不应该检查每个请求上的用户数据库,但这可能是不正确的。 一个想法是在初始login时回拨到后端,如果该账户不存在,创build它,如果该账户存在,继续前进。 然后,只要用户在前端login之后,信任Auth0 JWT(如果它在后端validation),就会在每个后续请求中相信。 从我在网上看到的这个过程的很less的描述,似乎我描述的是正常的方式。 但是在某些情况下,这是没有意义的。 如果用户被禁止呢? 他们仍然可以使用主动JWT访问服务器function,直到时间到期。 因此,如果在每个API请求上检查用户存储是正常/高效,那么如何将Auth0的stringid( user_id与数据存储中的整数ID相关联来执行查询? 我正在使用一个SQL变体。