Tag: reactjs

为什么即使webpack不抛出任何错误，React组件不渲染？: APP-client.js var React = require('react'); var APP = require('./components/APP'); React.render(<APP />, document.getElementById('react-container')); App.js （component）var React = require（'react'）; var APP = React.createClass({ render() { return (<h1>Hello World form React</h1>); } }); module.exports = APP; webpack.config.js我有问题与webpack，但解决了预设添加。现在运行良好。 module.exports = { entry: "./app-client.js", output: { filename: "public/bundle.js" }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: "babel-loader", query: […]

错误：`output.path`需要是绝对path或`/`: 我是React的初学者，目前我正在尝试基本的设置。到目前为止，我已经安装了npm的基本模块，我的项目的文件夹结构如下所示。 package.json显示了我已经安装的项目以及一个小的项目描述。 { "name": "test", "version": "1.0.0", "description": "test", "main": "index.js", "scripts": { "start": "webpack-dev-server –hot" }, "repository": { "type": "git", "url": "https://github.com/theo82" }, "keywords": [ "test" ], "author": "Theo Tziomakas", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" } } 无论如何，当我打字npm开始，我得到这个错误。 Error: `output.path` needs to be an absolute […]

渲染方法中意外的标记参数: 我试图启动Express.js服务器与我下载的反应的应用程序，但是当我做npm开始在我的服务器上有错误 ERROR in ./src/app.jsx Module build failed: SyntaxError: Unexpected token (6:7) 4 | import 'react-select/dist/react-select.css'; 5 | > 6 | render(<div>Place your application here</div>, document.getElementById('app-root')); 为什么会这样？

使用Node＆React进行基本的file upload: 我已经构build了一个React App来教自己React和Node.js 我正在使用由Facebook提供的样板名为create-react-app的样板，它使用Webpack捆绑应用程序。我现在在哪里我试图创build应用程序中的上传文件function。我偶然发现了一个叫做Multer的东西，当它和Express一起使用的时候，它可以相当简单地上传文件。我打算使用这个和expression我的应用程序的file upload部分。这是下面的代码与我想要实现的： App.js： import React from 'react'; import testupload from './testupload/testupload'; var App = React.createClass({ testUpload(e) { e.preventDefault(); testupload(); }, render() { return (<div className="outer-most-container"> <form encType='multipart/form-data'> <input type="file" method="post"/> <button type="submit" onClick={this.testUpload}>submit</button> </form> </div>) }) export default App; testupload.js： var express = require('express') var multer = require('multer') var […]

如何通过AJAX加载容器应用程序中的React组件: 什么是通过AJAX在现有的React应用程序中加载/插入React组件的最佳实践。我正在考虑通过AJAX加载各种React组件的“容器应用程序”。这怎么可能呢？这与webpack如何工作？

将文件从受保护的path下载到浏览器: 我有一个反应前端和一个nodejs / express后端。后端可以通过受保护的路线提供文件（下载）： GET /api/file/:id 当前端想要启动一个文件下载时，它使用这个代码向这个端点发送一个请求（并且Authorization头被设置了一个有效的token ）： axios.get(`${apiURL}/file/${id}`) .then(file => { … }) 后端回应这个代码： router.get('/file/:id', requireAuth, = (req, res, next) => { … res.set('Content-Type', 'application/pdf'); res.download(file.path, file.filename); };); 这工作正常：下载开始，二进制数据存在于axios调用的axios .then()情况的file对象中。我的问题：而不是下载完整的文件，我想在文件下载开始之前将文件传递给浏览器，这样浏览器就像通常的浏览器触发下载一样处理下载，浏览器会提示下载或显示文件。如何才能做到这一点…？解决scheme：感谢@FakeRainBrigand提示，我通过请求参数向路由添加了基于令牌的授权（使用护照策略）： const jwtOptions = { jwtFromRequest: ExtractJwt.fromExtractors([ ExtractJwt.fromHeader('authorization'), ExtractJwt.fromUrlQueryParameter('token'), ]), secretOrKey: secretKey, }; 现在我可以将下载直接传递给浏览器来处理它： window.location.href = `${apiURL}/file/${_id}?token=${token}`;

无法在React中inputInputType的“文字”: 我正在使用NodeJS。这是我在coursePage.js中的组件。问题是，当我运行它时，我无法input我的InputType，虽然我看不到我的代码中有任何错误（控制台也没有显示任何东西）。 import React , {PropTypes} from 'react'; import {connect} from 'react-redux'; import * as courseActions from '../../actions/courseActions'; class coursesPage extends React.Component{ constructor(props, context) { super(props, context); this.state = { course: {title: ""} }; this.onTitleChange= this.onTitleChange.bind(this); this.onClickSave= this.onClickSave.bind(this); } onTitleChange(event){ const course = this.state.course; course.title = event.target.value; this.setState=({course: course}); } onClickSave(){ this.props.dispatch(courseActions.createCourse(this.state.course)); } courseRow(course,index){ […]

在单个的Heroku服务器上启动+反应？: 我有一个单独的项目，在1337端口上运行sails应用程序，并在3000上作出反应。我怎样才能部署到单个heroku实例？它在1337上航行，在3000上反应。

在javaScript中使用提取API进行file upload: 嗨，我试图从这么多天上传一个tar文件，但每次我失败了。我是这个JS，UI和https req / res域的新手。我的环境是：nodeJS，后端JavaScript。 ReactJS为前端。我需要从我的机器上传tar文件到远程服务器。这里是我的前端代码，我正在提取上传文件的请求。 export function postXCCDF () { let _headers = { 'Accept': 'application/json, application/xml, text/plain, text/html, *.*', 'Content-Type': 'multipart/form-data; boundary=—-WebKitFormBoundaryyEmKNDsBKjB7QEqu' }; var formData = new FormData(); formData.append('type', 'file'); formData.append('file', 'C:\\MyDrive\\rules.zip'); let uri = '/rest/policy'; const options = { method: 'POST', headers: _headers, body: formData }; return fetch(`${_host}${urlPrefix}${uri}`, options) […]

如何在我的React应用程序中使用猪拉丁语翻译器npm模块: 我需要编写一个React / Redux应用程序来将英文句子翻译成Pig Latin。我发现有一些已经存在的npm 模块用于这个目的，因此想到重用它们。我为这个翻译写了一个简单的function组件，如下所示。 import _ from 'lodash'; import React from 'react'; import piglatin from 'piglatin'; function convertToPigLatin(data){ // https://www.npmjs.com/package/piglatin // return pigLatin(data); } export default (props) => { console.log(props.data); console.log(piglatin('hello there')); // Works fine console.log(piglatin(props.data)); // gives an ERROR return ( <label>Hello !</label> ) } 简单地说，我只是想将翻译后的文本logging到控制台中，但是当我尝试这个function后，在根据下面的答案更改硬编码文本后可以正常工作。 console.log(piglatin('hello there')); // Works fine […]