Tag: reactjs

无法从服务器获取对象数组

我正在写一个简单的网站，显示从服务器的对象列表 服务器：index.js var db = [{ username: 'admin', password: '1234', email: 'admin@gmail.com'}]; app.get('/getListAccount', (req, res)=>{ res.send(db); }) 显示：list.js import React from 'react'; import {connect} from 'react-redux'; import axios from 'axios'; class Transaction extends React.Component{ render(){ var {listUser} = this.props; var xhtml = listUser != null ? <p>{listUser.map((e, i)=><p key={i}>{e.username}</p>)}</p>: <p>No user</p>; return ( <div> <h1>Transaction</h1> […]

在NodeJS服务器（我正在使用react-router）的同构react-redux应用程序中设置存储的初始状态，

我正在尝试从NodeJS服务器设置我的redux商店的初始状态。 我不确定我错过了什么，以及如何使其工作。 这是我的server.js const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('./webpack/webpack.development.config.js'); const compiler = webpack(config); const app = express(); app.use(webpackHotMiddleware(compiler.compilers.find( compiler => compiler.name === 'client' ))); app.use(webpackHotServerMiddleware(compiler)); app.listen(3000); 这是我的webpack.development.config const path = require('path'); module.exports = […]

如何将asynchronous状态提取发送到组件？

我目前正在一个小应用程序的乐趣。 我遇到了使用axios的问题，并将响应作为更新状态返回给我的App组件。 然后，我尝试允许另一个组件使用该状态，但我无法实际访问数据。 我可以从列表组件内console.log（道具），但我不知道如何输出实际的数据，因为我只能够输出承诺的结果。 我想能够输出props.currentUser，并有它的googleId（使用谷歌Oauth2.0）..我相信解决scheme很简单，但是，这是我的代码： App.js – > import React from 'react'; import helpers from '../helpers'; import List from './List'; class App extends React.Component{ state = { currentUser: null } componentDidMount() { this.setState(prevState => ({ currentUser: helpers.fetchUser() })); } render() { return ( <div> <List currentUser={this.state.currentUser}/> </div> ); } }; export default App; helpers.js – […]

我的反应应用服务器在哪里？

我使用React教程页面上的教程设置了一个反应应用程序。 运行我input的应用程序 npm开始 Package.json提到启动应该运行“react-scripts start” 。 我试图了解在这个应用程序上生活的服务器在哪里？ 我想在此添加路由，以便我可以实现一些后端function，使AJAX调用“/电子邮件”或类似的path。 我是React的新手，但我假设应该有一些在端口上监听的Express路由，如果没有的话，有人可以帮我理解这个架构吗？

制作React图库的策略对search引擎友好

我写了一个React图片库或幻灯片。 我需要使search引擎可以索引替代文本，但因为我的服务器是在PHP中，React.renderToString是有限的使用。 该服务器在PHP + MySQL中。 PHP使用Smarty（一个体面的PHP模板引擎）来呈现HTML。 其余的PHP框架是我自己的。 Smarty模板有这么一个单一的线： <script> var GalleryData = {$gallery}; </script> 这是由PHP的控制器function呈现如下： return array( 'gallery' => json_encode($gallery), ); （ $gallery是MySQL查询的结果表）。 而我的.js： React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0)); 不是最优雅的设置，但考虑到我的服务器是在PHP中，似乎没有更好的方法来做到这一点（？） 我做了一个超级快速入门，在第一枪时修复了这个问题 – 我从Firebug复制了呈现的HTML，并手动将其插入到数据库中的一个新表中。 然后，我只是从PHP中呈现这个代码块，我们很高兴浏览器。 有一个复杂的是，因为React组件只在第一次渲染时插入到DOM中（据我了解），而且由于该库一次只显示一个图像幻灯片，我不得不手动点击所有幻灯片一次保存HTML代码。 但是现在，替代文本可以由CMS编辑，所以我需要自动化这个过程，或者想出一个更好的解决scheme。 在Node.js中重写服务器是不可能的。 我的第一个猜测是我需要安装Node，并编写一个脚本来创build相同的React组件。 由于input数据（包括alt文本）必须来自MySQL，我有几个select： 从注释连接到MySQL数据库，并复制查询 在PHP端创build一个只返回JSON的响应URL（把SQL查询放入一个通用函数） 在Node中获取整个页面，但是提取GalleryData将会是一团糟 然后，我必须确保所有组件都被渲染到DOM中，所以我可以通过手动调用nextSlide（）方法多次编写幻灯片（less一个）来编写脚本。 最后，我将把渲染的DOM再次保存到数据库（所以Node脚本毕竟需要一个MySQL连接 – 也许第一个选项是最好的）。 对于这样一个基本要求，整个过程似乎非常复杂。 我错过了什么吗？ 我对Node完全陌生，在浏览器之外构buildDOM的概念对我来说基本上是新的。 我不介意将Node引入到我的架构中，但它只是支持在前端使用React。 请注意，该网站每月大约有15,000个综合浏览量，因此不需要考虑大规模的可扩展性 – 我不使用任何页面caching，因为这种stream量并不需要。 我可能有一些需要像这样静态渲染的React组件，但是维护一个小的技术开销（例如，在Node中维护一组并行的SQL查询）不会是一个大问题。 有谁可以在这里指导我吗？

我如何处理服务器上的反应路由器可能的每条路线？

在反应路由器中的自述文件之后： var routes = ( <Route name="app" path="/" handler={App}> <Route name="inbox" handler={Inbox}/> <Route name="calendar" handler={Calendar}/> <DefaultRoute handler={Dashboard}/> </Route> ); Router.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 对节点和一个有信誉的前端js框架是非常新鲜的，请原谅noobish的问题.. 在服务器上处理路由最好如何？ 我的意思是，当某人登陆/calendar时会发生什么事情，我是否必须在快速路线中的客户端和服务器上容纳路线，或者是否有快递路线。 IE某人登陆/calendar ，应该表示为/的HTML并允许处理其余的？ 谢谢，约翰

使用Superagent服务器端获取连接ECONNREFUSED错误

我正在构build一个同构的React应用程序。 我正在使用Webpack捆绑我的JS。 我正在使用react-router进行路由。 当我点击“/search”路线时，要呈现的组件调用一个API（目前只是一个testingJSON文件）。 在客户端，superagent调用工作正常，并在渲染此路由时拉入数据。 当我尝试从服务器端渲染相同的路由时，出现此错误： Potentially unhandled rejection [2] Error: connect ECONNREFUSED at errnoException (net.js:901:11) at Object.afterConnect [as oncomplete] (net.js:892:19) 任何想法为什么发生这种情况？ 这是执行呼叫的代码： var request = require('superagent'); var Promise = require('Promise'); module.exports = { doCall: function(url, params) { return new Promise(function(resolve, reject) { request .get(url) .end(function(err, res) { if(res) { resolve(res); } else { reject(err); […]

React-router服务器端错误

我试图让我的客户端Web应用程序同构。 我得到这个模式： 客户端路由（使用react-router）和服务器端路由 在这里，我得到了什么。 server.js： var React = require('react'), express = require('express'), Router = require('react-router'), routes = require('./src/js/main'), path = require('path'), app = express(), port = 5555, bodyParser = require('body-parser'); // Make sure to include the JSX transpiler require("node-jsx").install(); // Include static assets. Not advised for production app.use(express.static(path.join(__dirname, 'dist'))); // Set view path app.set('views', path.join(__dirname, […]

React和Socket.io

我正在尝试使用ReactJS和Socket.io创build一个简单的应用程序 在我的组件我想能够与服务器通信，但问题是，我不知道如何做io.connect() 1.是否需要明确指定IP地址，如io.connect("http://myHost:7000")还是足够说： io.connect() ？ 正如我们可以在这段代码中看到的： https ： //github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx 2.我做的或多或less与此代码相同，但是当我执行npm start时，我收到错误，因为io is undefined 。 我认为， io是通过包含socket.io脚本全局提供的。 我怎么解决这个问题 ？ 'use strict'; var React = require('react'); var socket = io.connect(); var chatWindow = React.createClass({ displayName: 'chatWindow', propTypes: {}, getDefaultProps: function() { return ({ messages: 0 }); }, componentDidMount: function() { socket = this.props.io.connect(); socket.on('value', this._messageRecieve); }, _messageRecieve: […]

reactJs Jest：`jsdom 4.x以前只能用于io.js，而不是Node.jsT：

的package.json： { "name": "flux-pricing", "version": "0.0.1", "description": "Pricing component with flux", "main": "js/app.js", "dependencies": { "flux": "^2.0.0", "jest-cli": "^0.5.0", "jsdom": ">= 0.1.23 < 4.0.0", "react": "^0.12.0", "underscore": "^1.7.0" }, "devDependencies": { "browserify": "~6.2.0", "envify": "~3.0.0", "react": "^0.12.0", "reactify": "^0.15", "watchify": "~2.1.0", "gulp": "~3.8.9", "gulp-browserify": "~0.5.0", "gulp-concat": "~2.4.1", "node-jsx": "~0.2.0", "express": "~4.0.0" }, "scripts": { "start": […]