Tag: reactjs

如何从通用的JavaScript引用一个React类: 我有这个index.html： <html> <head> <title>Sample App</title> <link href="./src/css/bootstrap.min.css" rel="stylesheet" /> <link href="./src/css/bootstrap.dashboard.css" rel="stylesheet"> </head> <body> <div id='root'> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./src/js/jquery.signalR-2.2.0.min.js"></script> <script src="http://localhost:26665/signalr/hubs"></script> <script type="text/javascript" src="/static/bundle.js"></script> <script type="text/javascript"> $(function() { var myHub = $.connection.signalRTwitchBotParserHub; myHub.client.OnNewMessage = function (data) { // Call AppActions.dispatchMessage(message); }; $.connection.hub.url = "http://localhost:26665/signalr"; $.connection.hub.start() }); </script> </body> 我怎样才能从那里调用一个React创build的类？我想代替// Call […]

带有react-router的webpack中的多个入口点: 我正面临着巨大的问题，试图与反应路由器一起实现多个入口点。目的是实现使用webpack做一些build议由https://github.com/petehunt/webpack-howto 。到目前为止，我已经把它设置为这样： webpack.config.js entry: { entry1: __dirname + './entry1.jsx', entry2: __dirname + './entry2.jsx' } routes.jsx export default ( <Route path='/' name='app' handler={App}> <DefaultRoute handler={entry1} /> <Route name='entry2' handler={entry2}/> </Route> ); 无论何时运行此代码以在客户端上实例化Router的实例 Router.run(routes, Router.HistoryLocation, (Handler, state) => { React.render(<Handler />, document.getElementById('app')); }); Node.js会尝试在服务器上运行这个代码，因为DOM不可用，所以显然会失败。它会产生一个错误。是否有任何适当的方法来实现多入口点与react-router？

ReactJS webapp中的业务逻辑: 我已经开发了webapp（ReactJS，Flux，React-router; Server：NodeJS，Express）它最初只加载html（同构方式）。现在我需要从客户端隐藏一些业务逻辑。例如，我有评分系统。用户应该只能投票，如果他以前没有投票。我想，应该是这样的：用户按下投票button。这个button的处理函数发送一个对象到serverSide： { userName: login, password: password, votedObjectId: objectId } 服务器应该检查，如果这个用户存在于数据库（通过用户名和密码），并且如果这个用户之前已经投票了这个对象（通过userName和votedObjectId）。如果一切正常，服务器应该添加行到评价表（userName和votedObjectId）我不知道如何实现它。我想，我应该在server.js文件中创build一个包含这个逻辑的js方法。而客户端应该触发这个方法。客户端如何发送请求到server.js？

使用Flux / React应用程序存储authentication详细信息: 我目前正在使用flux和nodejs应用程序。具体可通的。对于用户身份validation，我使用passport.js，它简化了对用户进行身份validation，创build会话和validation会话的过程。一旦会话被validation，我的服务器发回一个用户对象。 { _id: foo, email: foo@bar.com } 然后，我的身份validation存储拥有一个IsLoggedIn方法来返回商店是否有用户。但是我意识到这是不安全的，就好像商店上的数据被操纵一样，即使用户没有实际login，商店也会返回isLoggedIn。我目前的处理方式是，当用户调用需要身份validation的apis时，我会在api调用中检查身份validation。所以基本上，如果恶意用户使用flux存储数据，他们可能会看到针对login用户/不同组件的操作，但是他们无法真正修改任何内容。我打算为用户pipe理员权限做同样的事情。我的问题是，有没有更好的方法来处理这个问题？（即更好的方式不暴露数据到客户端）

如何使用OpenLayers和react-starter-kit？: 我在基于react-starter-kit的项目中运行OpenLayers3 Map时遇到了问题。我试图添加简单的地图来反应组件。我所做的是：运行npm install openlayers 将import ol from 'openlayers'添加到ContactPage.js 创build简单的地图 componentDidMount(){ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); } 将渲染函数<div id="map" className="map"></div> jsx部分添加<div id="map" className="map"></div> 运行npm start。我得到一个错误： …\node_modules\openlayers\dist\ol.js:7 module.exports = […]

是什么让我可以在反应js文件中“需要”一个模块或库？: 我遵循一些教程来构build一些反应的应用程序。我发现这个js文件包含如下的一些模块。 var $ = require('jquery'); var React = require('React'); var ReactDOM = require('react-dom'); var url = require('url'); var moment = require('moment'); var NewsItem = React.createClass({ ………code……. 我以为只有在node.js应用程序可以要求这样的模块。或所有的JS应用程序可以这样做？有人可以向我解释吗？下面是我的package.son文件.. { "name": "hn", "version": "0.1.0", "private": true, "browserify": { "transform": [ [ "reactify" ] ] }, "dependencies": { "jquery": "^2.1.4", "lodash": "^3.10.1", "moment": "^2.10.6", […]

帆 – 反应：从父组件访问道具: 我正在开发一个使用Sails和React的Web应用程序。我试图从我的数据库中获取所有的用户。所以，为了让所有的用户，我写了下面的代码启动UserController index : function(req,res){ User.find() .then(function(users){ renderTo(routes, req.wantsJSON, res, "/user" , {title: 'Users'}, {'users' : users}); }).catch(function(err){ return res.negotiate(err); }); } 现在，要接收用户数组，我的React代码是：反应代码 var React = require('react'); var http = require('http'); var UserList = require('./userList'); var user = React.createClass({ render: function() { return ( <UserList {…this.props} /> ); } }); module.exports = […]

TypeError：require不是Object.module.exports.map的函数: 同时编译节点的js项目与gulp命令下面的错误发生。在public / js / app / app.node.js中： var fs = require('fs'); ^ TypeError： require不是 Object.module.exports.map ../文件中的函数我试图用当前的项目实现反应streamapi调用。更新：这个错误在添加后已被删除 new dwebpack.DefinePlugin({ "global.GENTLY": false }) 但目前下面的错误发生。 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or directory, open '/types/mime.types' at Error (native) at Object.fs.openSync (fs.js:549:18) at Object.fs.readFileSync (fs.js:397:15) at Mime.load

无效的目录Users / node_modules / crypto-browserify反应原生: 我正在尝试使用我在github（crypto-browserify）中find的软件包，并使用npm install –save crypto-browserify ，然后用var crypto = require('crypto-browserify');导入它var crypto = require('crypto-browserify'); 。我似乎无法得到这个工作，我不断得到上述错误，虽然crypto-browserify是在我的项目的节点模块文件夹。任何帮助非常感谢，我一直在努力解决这个问题！

另一个文件夹中的Node_modules: 我有C：/ Users / user / AppData / Roaming / npm / node_modulespath中的所有节点模块。然后，我正在尝试为我的脚本webpack添加包含babel和babel-presets的node_modules。我的webpack.config.js module.exports = { context: './scripts', entry: ['./main', './2.jsx'], output: { path: '../scripts', filename: 'bundle.js', }, resolve: { modulesDirectories: ['C:/Users/user/AppData/Roaming/npm/node_modules'] }, resolveLoader: { root: 'C:/Users/user/AppData/Roaming/npm/node_modules' }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel-loader', include: 'C:/Users/user/AppData/Roaming/npm/node_modules', exclude: /(node_modules|bower_components)/, query: { presets: ['es2015', […]