在我的反应像这样的应用程序错误( 未捕获的错误:操作必须是普通的对象。使用自定义中间件进行asynchronous操作。 )显示每一个重要的是运行这个应用程序已成功安装,所以不必担心它谷歌它几次,但没有发生任何人有一个想法来解决这个问题,在这种情况下,将不胜感激,并在此先感谢 这是我的行动index.js export function CounterActions(){ return { type: "Add" } } 这是我的reducer counterApp.js const initialState = { counter: 0 } function counterApp(state, action) { if (typeof state === "undefined"){ return initialState; } switch (action.type) { case "Add": return Object.assign( {}, state, { counter: state.counter + 1 } ); default: return state; } } […]
我正在尝试使用nuka传送带作为我将要处理的反应项目。 http://kenwheeler.github.io/nuka-carousel/#/ 我是全新的反应,我无法弄清楚如何build立旋转木马。 我已经得到了一个反应项目,使用入门工具包和步骤运行,如下所述: https://facebook.github.io/react/docs/getting-started.html 然而,在这一点上,我不知道如何启动旋转木马。 在nuka网站上,我看到了示例代码: 'use strict'; var React = require('react'); var Carousel = require('nuka-carousel'); const App = React.createClass({ mixins: [Carousel.ControllerMixin], render() { return ( <Carousel> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide1"/> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide2"/> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide3"/> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide4"/> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide5"/> <img src="http://placehold.it/1000×400/ffffff/c0392b/&text=slide6"/> </Carousel> ) } }); module.exports = App; 但是,我在哪里把这个代码? 我试图把它放入helloworld.js(启动文件,如反应入门页面所述),但会引发一个错误,需要的是未定义的。 这是否意味着我需要首先运行节点服务器,以便可以使用? 如果是这样,我如何设置服务器,除了我已经设置的反应项目?
我读过ES6,因为许多Web浏览器都支持它,所以我现在想要的是,如果我可以在最新版本的node.js和js框架(如angular.js)中使用ES6function和语法,或者作出反应。 js?
我刚刚开始使用Webpack(用于w / React),并且在试图引入bower包时遇到了一些问题。 我已经安装通过凉亭pickadate ,我有以下webpackconfiguration( 原始 )。 看看pickadate bower.json文件,它有一个数组,而不是只有一个string,因为它需要拉多个js和css文件。 // ./webpack/dev.config.js // … resolve: { modulesDirectories: [ 'src', 'node_modules', 'bower_components' ], plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ) ], extensions: ['', '.json', '.js'] }, 我的组件: import React, {Component, PropTypes} from 'react'; import $ from 'jquery'; import pickadate from 'pickadate'; class DateInput extends Component { […]
如果这个问题看起来很普通,我会开始说我很抱歉,但是我很难解决这个问题。 所以我会在这里给你一个机会。 我想用反应build立一个kafka话题的消费者,所以它会渲染,我不知道我的话题中有一个新的消息。 我已经有了消费者的代码: var kafka = require('kafka-node'), Consumer = kafka.Consumer, client = new kafka.Client(), consumer = new Consumer( client, [ { topic: 'logs', partition: 0 } ], { autoCommit: false } ), Producer = kafka.Producer, client = new kafka.Client(), producer = new Producer(client); consumer.on('message', function (message) { console.log(message); }); 任何时候都有一个新的消息,消费者的事件将会被调用。 但是我看不出有什么办法来反应。 我为任何东西,教程,文章,任何东西。 谢谢。
我有一个React / Flux应用程序,其中包含以下组件: header.js subnav-area.js 饲料area.js 我也有相应的商店: navbar-store.js(header) subnav-store.js 饲料store.js …和行动: navbar-actions.js(header) subnav-actions.js 饲料actions.js 当按下subnav上的一个button时,feed和subnav都应该被更新,设置正确的进给types并突出显示激活的subnav元素。 我成功地实现了这个目标,但是我也多次启动一个onChange事件,同样也使用header.js组件,尽pipe它不应该受到这个动作的影响。 在行动中,我打电话给这样的调度员: AppDispathcer.handleViewAction({ actionType: AppConstants.SUBNAV_SET_ACTIVE, _id: subnavItemId }) 当然,这取决于目的。 我的调度员看起来像这样: handleViewAction:function(action){ this.dispatch({source:'VIEW_ACTION',action:action})} 在店里我有这样的事情来处理调度员: dispatcherIndex: AppDispatcher.register(function(payload) { var action = payload.action; switch(action.actionType) { case AppConstants.FILTER_SET_CAT: FeedStore.selectVisibleFeedItems(); break; case AppConstants.FEED_SHOW_MORE: FeedStore.showMoreItems(filterCatName); break; } FeedStore.emitChange(); return true; }) 所有组件都具有以下function(但具有不同的侦听器名称): componentWillMount:function(){ FeedStore.addFeedListener(this._onChange, 'feed-area.js'); }, […]
我正在尝试通过一个关于react / redux的教程,而且在运行摩卡unit testing时遇到了一个错误。 当我运行'npm运行testing'我得到以下错误(我怀疑必须与path或.jsx扩展名)。 17 error Windows_NT 6.3.9600 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xenoputtss\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "test" 19 error node v5.1.0 20 error npm v3.4.1 21 error code ELIFECYCLE 22 error voting-client@1.0.0 test: `mocha –compilers js:babel-core/register –require ./test/test_helper.js 'test/**/*.@(js|jsx)'` 22 error Exit status 255 23 error Failed at the voting-client@1.0.0 test script 'mocha –compilers js:babel-core/register […]
我最近更新了我的项目到节点5.1.0,npm 3.3.12,并更新了我所有的依赖…现在我正在对付一堆错误! 最初我在这个问题上有同样的错误: https : //github.com/facebook/jest/issues/554 ,很容易修复。 Bur现在我得到这个: 警告:React.createElement:types不应该是null,undefined,boolean或number。 它应该是一个string(对于DOM元素)或ReactClass(对于复合组件)。 和 错误:不变违规:元素types无效:期望一个string(对于内置组件)或一个类/函数(对于复合组件),但得到:对象。 我有这在我的package.json: "jest": { "collectCoverage": true, "testRunner": "./node_modules/jest-cli/src/testRunners/jasmine/jasmine2", "scriptPreprocessor": "./node_modules/babel-jest", "unmockedModulePathPatterns": [ "./node_modules/es6-promise", "./node_modules/events", "./node_modules/fbjs", "./node_modules/flux", "./node_modules/history", "./node_modules/immutable", "./node_modules/lodash", "./node_modules/moment", "./node_modules/react", "./node_modules/react-addons-pure-render-mixin", "./node_modules/react-addons-test-utils", "./node_modules/react-d3", "./node_modules/react-dom", "./node_modules/react-modal", "./node_modules/react-router", "./node_modules/whatwg-fetch" ] } 我的testing的相关部分是: var ImageGallery = require('../../../app/components/image-gallery/image-gallery'); imageGalleryComponent = TestUtils.renderIntoDocument( <ImageGallery items={items} onSlide={onSlideMock} lazyLoad={false} showBullets={true} showThumbnails={true} […]
我有很多例子,文字呈现比几乎感觉即时的图像慢。 我正在通过reactjs和服务器端使用nodejs进行渲染。 例如这个gif: http : //recordit.co/waMa5ocwdd 显示标题图像立即加载,CSS已经加载,因为颜色在那里和现在。 但是,由于某种原因,文本需要将近半秒的时间才会出现。 我该如何解决或优化? 如果你想尝试一下,gif中的网站是quran.com。 谢谢!
我正在尝试使我正在开发的React应用程序是同构的。 这样做的一个已知的问题是,webpack加载器允许import/require非JavaScript资产,如CSS文件。 例如 // ExampleComponent.jsx import Select from 'react-select'; import 'react-select/dist/react-select.css'; 如果使用Express构build应用程序,则节点将获取到此导入,并因为无法处理CSS文件而失败,因此仅期望JavaScript(并且感谢babel-register JSX)。 其中一个解决方法是在构build服务器端应用程序(包括所有通用部分,如组件,因为它是一个同构应用程序)时,使用webpack中的target: 'node'选项来构build服务器端代码。 这应该会导致server.js被构build,然后可以由节点运行。 注:我知道还有其他的方法来解决这个问题(比如不使用import/require来包含任何不是javascript的东西,但是在这个应用程序开发的这个阶段是不实际的。 // webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = [ // Client build { entry: { 'bundle.min': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ], 'bundle': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ] }, output: { path: './dist', filename: '[name].js' […]