Articles of reactjs

如何在一个反应​​组件中返回一个http错误?

在服务器端,reactjs组件应该如何通知节点应用程序返回一个http错误? 我的第一个想法是抛出一个错误: var notFound = function () { var error = new Error("Not Found"); error.httpError = 404; throw error; }; var App = React.createClass({ render: function () { return react.DOM.div(null, Locations({path: this.props.path}, Location({path: "/", handler: home}), NotFound({handler: notFound}) ) ); } }); try { res.send(React.renderComponentToString(app())); } catch (err) { if(err.httpError) { res.send(err.httpError); } else { […]

如何处理nodejs上的窗口对象,以供reactjs应用程序的服务器端呈现

我正在尝试为我的reactjs应用程序实现服务器端呈现。 我正在使用webpack构buildreactjs应用程序,增强解决scheme来处理nodejs中的jsx文件的导入。 我的应用程序依赖于像enquire.js这样的第三方库。 当应用程序尝试在nodejs上导入enquire.js时,它会失败,并显示错误ReferenceError: window is not defined 由于窗口对象不可用nodejs如何处理使用窗口进行服务器端呈现的库?

服务器端反应路由器不会呈现我的路线

我与版本1.0.0-rc1和我的匹配函数将不会正确呈现我的路线。 这是我的服务器 import express from 'express'; import React from 'react'; import createLocation from 'history/lib/createLocation' import Router, { match, RoutingContext } from 'react-router'; import createRoutes from './create-routes'; const app = express(); const routes = createRoutes(); app.use((req, res) => { let location = createLocation(req.url); match({ routes, location }, (error, redirectLocation, renderProps) => { if (redirectLocation) res.status(301).redirect(redirectLocation.pathname + […]

meteorbuild立打破部署到Heroku

我没有改变任何依赖关系,但是当我部署到Heroku的时候,我的构build突然间崩溃了。 请参阅下面的错误消息获取更多信息 —–> Fetching set buildpack https://github.com/AdmitHub/meteor-buildpack-horse.git… done —–> Node.js app detected —–> Installing node —–> Installing meteor Downloading Meteor distribution Meteor 1.3 has been installed in your home directory (~/.meteor). Now you need to do one of the following: (1) Add "$HOME/.meteor" to your path, or (2) Run this command as root: cp "/tmp/buildpack20160403-165-1y59l1z/meteor-j9kn/.meteor/packages/meteor-tool/1.3.0_3/mt-os.linux.x86_64/scripts/admin/launch-meteor" […]

如何在服务器上呈现我的反应组件而不用大量修改现有的应用程序?

我的server.js文件是写在节点上,如下所示: var path = require('path'); var express = require('express'); var app = express(); var PORT = process.env.PORT || 8080 // using webpack-dev-server and middleware in development environment if(process.env.NODE_ENV !== 'production') { var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); var webpack = require('webpack'); var config = require('./webpack.config'); var compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { noInfo: true, […]

如何在React应用程序中使用webpackasynchronous需要模块?

在React应用程序中,我想导入一个名为flowtime.js的库,仅用于特定的path/path,然后执行更多的代码。 这个库有一个名为Brav1toolbox的依赖项 。 在npm上都不可用。 我的策略是在Component的componentDidMount方法中使用webpack的require 。 这是我的尝试: componentDidMount() { require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) { var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js'); }); } 这会导致以下错误。 Uncaught(承诺)ReferenceError:Brav1Toolbox未定义 所以Flowtime正在加载,但无法findBrav1Toolbox。 我没有React或webpack的经验,所以也许我有一个误解。 我正在尝试使用webpack来只加载这些库,如果我的用户访问需要这些库的path。 这是我用作参考的webpack指南 。 感谢您的帮助。

服务器端与REDX渲染

我有一个简单的应用程序与reactjs和redux构build。 作为即时开始学习REDX我有一些问题做服务器端渲染。 我到目前为止是…客户端App.js呈现应用程序组件。 render( <Provider store={store}> <App /> </Provider>, document.body ); 应用程序组件: const App = () => ( <div> <SearchContainer /> <TodoContainer /> </div> ) 如果两个项目都是容器,SearchContainer从input框中获取input,发起一个正在调度带有加载待办事项(来自远程rest服务)的消息的操作。 现在编号喜欢加载在服务器端的页面加载的待办事项,并显示一次页面显示。 我会怎么做呢? 有没有办法在页面实际显示之前不使用服务器端渲染和加载项目? 目前为止,route.js文件是: const middleware = [ thunk ] if (process.env.NODE_ENV !== 'production') { middleware.push(createLogger()) } const store = createStore(reducer,applyMiddleware(…middleware)) app.get('/', function(req, res) { res.render('home',{ markup: ReactDOMServer.renderToString( <Provider […]

React Native构build警告问题?

在运行react-native init reactApp我得到一个警告npm WARN react-native@0.39.2 requires a peer of react@~15.4.0-rc.4 but none was installed 。 构build是成功的,虽然这是我的package.json构build之后。 { "name": "reactApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "15.4.1", "react-native": "0.39.2" }, "devDependencies": { "babel-jest": "18.0.0", "babel-preset-react-native": "1.9.1", "jest": "18.0.0", "react-test-renderer": "15.4.1" }, "jest": { "preset": "react-native" } […]

服务器渲染react-router v4 passthrough如果404

在react-router v3中,我们可以知道服务器端渲染何时与当前url不匹配。 这允许我将请求传递给我的express.static中间件,而不是发送呈现的应用程序。 在反应路由器v4中,我们必须使用 const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); 以便在服务器端渲染。 但是,它会自动将所有内容redirect到/ 。 为什么这种行为甚至存在? 难道我们不能像我们所期望的那样错误地失败吗? 我怎么能知道没有匹配的东西,我可以打电话给next() ,让另一个快递的路线做这个工作? 这是我想要使用的整个function: app.get('*', (req, res, next) => { const context = {}; const htmlData = renderToString( <StaticRouter location={req.url} context={context} > <App/> </StaticRouter> ); console.log(JSON.stringify(context, null, 4)); // empty object if (context.url) { // <———————— […]

React.js – 可拖动元素上的setDragImage

当我拖动一个可拖动的元素(在这种情况下,下面的ul ),我试图换出浏览器使用的默认图像。 这是我的代码。 我没有得到任何错误 – 它只是不起作用,我留下浏览器使用的默认图像。 drag(e) { let img = new Image() img.src = 'http://img.nodejscore.com/javascript/some-image.png' e.dataTransfer.setDragImage(img, 0, 0) } render() { return( <ul draggable="true" onDrag={(e) => {this.drag(e)}> <li>1</li> <li>2</li> </ul> ) }