Tag: reactjs

在服务器上渲染<option value =“foo”selected>

React v0.12 / v0.13：我有一个问题，我想在服务器和客户端（同构）都呈现一个<select>元素。 这是一个当前重现问题的例子： const React = require("react"); const SelectedDebug = React.createClass({ displayName: "SelectedDebug", render() { return ( <div> <select value="C"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </div> ); } }); module.exports = SelectedDebug; selected属性不在服务器上呈现，但在浏览器中正常工作。 我也尝试在<select>元素上设置defaultValue prop，这似乎没有什么区别。 当我使用<option value="C" selected> ，它确实有效，但是，在控制台中会引发警告，告诉我使用value或defaultValue prop。 该文档还描述了所需的行为： https ： //facebook.github.io/react/docs/forms.html#why-select-value 此代码在使用babel-core进行转译的Node v0.12中运行。 这是一个错误，还是我错过了什么？ 更新：这是React中的一个错误。 看到我的评论/链接下面。

ReactJS react-router RoutingContext

我正在使用ReactJS与react-router模块构build同构应用程序，以便在服务器端进行路由。 从其在服务器上使用react-router的指南 ： (req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { //… else if (renderProps) { res.status(200).send(renderToString(<RoutingContext {…renderProps} />)) } //… }) } 几乎没有关于这个RoutingContext的信息。 所以对于我来说它的工作原理还不太清楚。 它是从反应路由器（在其他路线顶部使用）的某种Router组件的替代？ 任何帮助理解将非常感激！

在第二个动作调用中，React / Redux状态为空

对于React / Redux，我还是比较新的，所以如果这是一个简单的问题，但是我还没有find解决scheme，我很抱歉。 我有两个动作： // DESTINATIONS // ============================================== export const DESTINATION_REQUEST = 'DESTINATION_REQUEST'; export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS'; export const DESTINATION_FAILURE = 'DESTINATION_FAILURE'; export function loadDestination (params, query) { const state = params.state ? `/${params.state}` : ''; const region = params.region ? `/${params.region}` : ''; const area = params.area ? `/${params.area}` : ''; return (dispatch) […]

材料使用入门

对我来说，保守秘密就是material-ui，一个使用Google的Material Design UI和React的web框架。 我认为这是一个梦幻般的组合和未来。 但是，如何使用它也是一个保存完好的秘密。 http://material-ui.com/#/get-started上的入门指南不适用于普通的Joe，但仅适用于可以理解的一小部分人员。 而且，这里的问题，比如如何使用material-ui框架？ ， 材料ui安assembly置 ，从来没有回答过。 我设法安装了material-ui， $ npm install material-ui react-tap-event-plugin@0.1.6 node_modules/react-tap-event-plugin react@0.13.2 node_modules/react envify@3.4.0 (through@2.3.7, jstransform@10.1.0) material-ui@0.7.4 node_modules/material-ui classnames@1.2.1 react-draggable2@0.5.1 $ ls -d1 node_modules/* node_modules/material-ui node_modules/react node_modules/react-tap-event-plugin 但接下来呢？ 我应该将它们移到我的/var/www/ ？ 或者启动nodejs，或者…？ 我怎样才能看到一个简单的演示，显示一切正在工作？ 总而言之，作为一个只知道http服务器和静态html页面的人，对我来说，看到它的最简单方法是在我自己的环境中使用我现有的web服务器吗？ 谢谢 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 14.10 Release: […]

ECONNFUSED在应用程序中进行GET请求时，API成功返回JSON

我正在用React编写节点应用程序，使用node-postgres和superagent进行后端调用。 比方说，我正在做一个GET请求，并使用返回的JSON来填充学生表。 我的API看起来像这样： import pg from 'pg'; import Router from 'express'; let router = new Router(); let conString = "postgres://user:pass@localhost/db_name"; router.get('/getStudents', function(req, res) { var results = []; pg.connect(conString, function(err, client, done) { if (err) { done(); console.log(err); return res.status(500).json({success: false, data: err}); } var query = client.query('SELECT first_name, last_name, email FROM students'); query.on('row', function(row) […]

使用Multer将图像上传到Express

我正在尝试将图像上传到Express服务器。 我不完全确定如何做到这一点，但是我从我能从MDN拿到的东西中得到了什么， express ， react-dropzone multer react-dropzone和multer文档。 Multer似乎没有从react-dropzone拿起FormData对象，注销req.file它返回undefined。 server.js var storage = multer.diskStorage({ destination: './public/users', filename: function (req, file, cb) { switch (file.mimetype) { case 'image/jpeg': ext = '.jpeg'; break; case 'image/png': ext = '.png'; break; } cb(null, file.originalname + ext); } }); var upload = multer({storage: storage}); app.use(upload.single('photo')); app.post('/uploadUserImage', function (req, res) { console.log(JSON.stringify(req.body.photo)) […]

是node.js与reactjs作为PHP模板渲染服务一个好主意？

我的网站是用PHP编写的。 Node.js也是为socket.io设置的。 我一直在考虑使用Reactjs进行服务器端渲染，以便重用视图。 计划使用v8js扩展，但是后来我遇到了这篇文章谈论两个可能的解决scheme： 1.使用v8js扩展和React-PHP-V8Js 2.从php发送数据到node.js来渲染视图，例如： 的node.js require("babel/register"); var React = require('react'); var express = require('express'); var path = require('path'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.use('/', function(req, res) { try { var view = path.resolve('./views/' + req.query.module); var component = require(view); var props = req.body || null; res.status(200).send( React.renderToString( React.createElement(component, props) […]

设置代理服务器创build反应的应用程序

我已经使用create-react-app启动了一个反应应用程序，并运行了npm run eject脚本来访问所有文件。 我之后安装了express并创build了与package.json文件位于同一级别的server.js文件 这些是server.js文件的内容： const express = require('express'); const app = express; app.set('port', 3031); if(process.env.NODE_ENV === 'production') { app.use(express.static('build')); } app.listen(app.get('port'), () => { console.log(`Server started at: http://localhost:${app.get('port')}/`); }) 这里没有什么疯狂的，只是设置了未来的API代理，我需要使用秘密，因为我不想暴露我的API。 在此之后，我添加了一个"proxy": "http://localhost:3001/"到我的package.json文件。 我现在卡住，因为我需要弄清楚如何正确启动我的服务器，并使用此开发模式server.js文件，然后在生产。 理想情况如果我们可以使用更多的代理ie /api和/api2 ，那也是一件/api2

Webpack外部节点和浏览器

我有一个在浏览器和服务器上运行的同构React应用程序。 我通过两个不同的入口点和不同的configuration运行两个单独的Webpack构build，为两者构build相同的代码。 问题是，在服务器的节点上运行时，通过外部脚本标记（本例中为Google Maps）存在于浏览器窗口上的外部文件显然不存在。 除入口点文件外，代码是相同的。 index.html的： // index.html <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script> 简化configuration： // Server Webpack config { entry: 'server.js', target: 'node', externals: { google: google } } // Client Webpack config { entry: 'client.js', target: 'browser', externals: { google: google } } 组件： // The view which builds and runs fine in // the client […]

如何使用React.js在Sails.js上呈现服务器端模板？

我正在尝试用Sails.js和React构build一个同构的应用程序。 客户端部分很容易。 但是我遇到了服务器端渲染的问题。 当我尝试使用React服务器渲染一个* .jsx文件时，我得到了这个： renderToString(): You must pass a valid ReactElement 我正在使用sailsjs，react和sails-hook-babel（用于ES6语法）。 ./assets/components/Auth.jsx： import React from 'react'; export class Auth extends React.Component { constructor(props) { super(props); } render() { return ( <div className='auth'> Very simple element without any logic just for test server-rendering. </div> ); } } ./api/controllers/AuthController.js： var Auth = require('./../../assets/components/Auth.jsx'); import React […]