Tag: reactjs

React 15与React-redux不兼容: 我正在尝试升级到我的项目上刚刚发布的react@15.0.0-rc.1，该项目也使用react-redux@^4.4.0软件包。但是，当我尝试运行文档（ https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html ）中build议的升级时， npm install –save react@15.0.0-rc.1 react-dom@15.0.0-rc.1 它出现了一个错误，因为版本不兼容： npm ERR! peerinvalid Peer react-addons-test-utils@0.14.7 wants react@^0.14.7 npm ERR! peerinvalid Peer react-redux@4.4.0 wants react@^0.14.0 有什么build议吗？

同构反应与Webpack的resolve.root选项: 我的React应用程序使用需要相对于我的JS文件的根，使用Webpack的resolve.root。即我的文件结构包含以下内容： components App.react.js containers AppContainer.react.js 在AppContainer.react.js中，我有： import App from 'components/App.react'; 这在客户端工作。现在我试图使它是同构的。如果我在我的server.js需要AppContainer.react.js，它说components/App.react没有find。节点正试图要求containers/components/App.react.js ，它不存在。我怎样才能使Node相对于给定的目录？编辑：我的目录结构如下所示： css/ html/ js/ components/ App.react.js containers/ AppContainer.react.js main.js <- requires AppContainer public/ server/ server.js <- requires AppContainer

在iis上运行反应同构: 我正在尝试使用iis上的iisnode使用node.js来运行反应我已经安装了最新的节点和最新的iisnode，并使用这个stackoverflow作为指导，但不能得到错误500. 如何运行Node.JS服务器的Web应用程序？有关如何在iis上做这个的指南？

Webpack，开发中间件和静态文件: 我有一个Web服务/ React / Redux项目与快递服务，我有一些麻烦理解他们如何融合在一起。我的快车应用程序运行Webpack并提供我的根index.html文件，如下所示： const app = express(); const server = require("http").createServer(app); app.use(bodyParser.json()); app.use("/some/path", express.static(path.join(__dirname, "/public"))); // webpack middleware const compiler = webpack(webpackConfig); const webpackDevMid = require("webpack-dev-middleware"); const webpackHotMid = require("webpack-hot-middleware"); app.use(webpackDevMid(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath // '/static/' })); app.use(webpackHotMid(compiler)); app.get("/", (req, res) => { if (!req.cookies.access_token) return res.redirect("/login"); return res.sendFile(path.join(__dirname, "index.html")); }); […]

Node.js：如何序列化/反序列化React组件？: 我想序列化一个React元素（给予道具的React组件的一个实例）并在别处反序列化它。你为什么问？我希望能够通过stdout从一个进程发送该类，并将其呈现在另一个进程中。我也希望渲染的组件是交互式的，所以只需使用ReactDOM.renderToString()将不足以… 我试过了：将其序列化为string并使用eval()进行反序列化使用自定义JSON.stringify()并分别为JSON.stringify()和JSON.parse()函数 MyReactComponent.toString()返回： "function MyReactClass() { _classCallCheck(this, MyReactClass); _get(Object.getPrototypeOf(MyReactClass.prototype), 'constructor', this).apply(this, arguments); }" 它不包含我的组件特有的任何方法（比如render()或constructor() ）。在JS Bin中查看这个示例代码： http : //jsbin.com/febuzupicu/edit? js,console, output

Webpack HMR抛出响应由于jsPDF造成的syntheticEvent错误: 系统信息： OSX 10.12.4 Sierra Node v7.10.0 npm v4.2.0 浏览器已testing： Chrome 58.0.3029.110 Safari 10.1 Firefox 53.0 问题：我有一个应用程序在我已经克隆的生产中有效地运行，并且正在尝试更新以准备构build续作。但是，我已经遇到了一个奇怪的Webpack问题，通过更新它/ React / HMR到更新的版本。 HMR将连接，并且Webpack似乎编译得很好。但是，与页面交互（如单击）会生成以下错误：显然，该应用程序在这一点上不再起作用，因为点击事件不会引发任何事情。有趣的是，我们在Node控制台和浏览器中也得到了以下404错误：（注：这似乎是一个巨大的查询string，包括函数，特别是引用syntheticEvent。如果你愿意，我可以打印整个东西） NODE v6.3.1 相关的NPMs： "react": "^15.5.4", "react-dom": "^15.5.4", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.4", "webpack": "^2.5.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" "babel-cli": "^6.11.4", "babel-core": "^6.24.1", "babel-eslint": "^7.2.1", "babel-loader": "^7.0.0", "babel-plugin-array-includes": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.0.0", […]

Uncaught TypeError：（0，_reactRouter.withRouter）在react-router 2.4.0中编程路由导航时不是函数: 我正在使用react-router 2.4.0并想以编程方式链接到另一个路由（我使用<Link>之前做了什么）。在这个SOpost里很好的解释了他们在2.4.x说你应该在withRouter使用装饰器模式，所以我使用下面的代码： import {withRouter} from 'react-router' // further imports omitted class CreateJobItemFormRaw extends React.Component { … } const CreateJobItemForm = withRouter(CreateJobItemFormRaw) export default CreateJobItemForm 然后在其他文件中，我使用 import CreateJobItemForm from './CreateJobItemForm' 但是，使用这种方法，我的应用程序不再渲染和控制台输出： CreateJobItemForm.js:76 Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function 谁能帮我解决这个问题吗？

React组件视图不会更新: 我有一个React组件pipe理列表中的多个手风琴，但是当我更新一个孩子，在React开发工具，它显示更新的文本，但在视图/用户界面，它不更新。请指教。 var AccordionComponent = React.createClass({ getInitialState: function() { var self = this; var accordions = this.props.children.map(function(accordion, i) { return clone(accordion, { onClick: self.handleClick, key: i }); }); return { accordions: accordions } }, handleClick: function(i) { var accordions = this.state.accordions; accordions = accordions.map(function(accordion) { if (!accordion.props.open && accordion.props.index === i) { accordion.props.open = true; […]

酶如果React组件需要jQuery，则会引发错误: 我试图用Enzyme的describeWithDOM()和mount()来testing一个React组件的行为。但是，当组件导入jQuery我得到这个错误：错误：jQuery需要一个包含文档的窗口我知道Enzyme使用引擎盖下的jsdom，我一直以为jsdom照顾窗口和文件。但我似乎无法find如何让这些工作在一起。 testing代码如下所示： import chai, {expect} from 'chai'; import Select from './Select'; import React, {createElement} from 'react'; import {describeWithDOM, mount} from 'enzyme'; describe('UI Select', () => { //more shallow tests here describeWithDOM('User Actions', () => { it('Toggles the .ui-options menu on button click', () => { const wrapper = mount(<Select {…baseProps} />); […]

所有的testing都运行完毕之后再进行清理: 是否有可能在Jest运行完成所有其他testing后运行的清理或拆卸任务？与setupFiles允许在运行任何testing之前设置任务类似。如果这也可以运行，不pipetesting是否有任何错误，奖励点。将afterAll(() => {})置于文件顶层（在任何describe函数之外）时，只会在完成特定文件的testing后才运行。这个用例是我有许多testing文件将在一个开发数据库中创build用户，我不想让每个testing文件负责清理和删除用户。编写testing时也可能发生错误，所以如果清理发生而不pipe错误是否会更好。