Articles of reactjs

ReactJS表单onSubmit不起作用,它不被调用

我使用NodeJS,JSX和ReactJS,我有下一个类: import React from 'react'; export default class LoginPage extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); console.log("QD"); } handleChange(event) { console.log("QDWWQD"); this.setState({value: event.target.value}); } handleSubmit(event) { console.log('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <input type="submit"/> </form> ); } […]

尝试运行节点服务器时出现“意外的令牌”

这似乎是在我改编的react-server-example ( https://github.com/mhart/react-server-example ) 我似乎无法使用JSX 。 我已经做了一些改变(比如用WebpackreplaceBrowserify等),但是,经过广泛的环顾四周,安装babel-present-react ,我似乎无法弄清楚我失踪的是为了运行应用程序。 的package.json { "name": "react-server-example", "version": "1.1.5", … "dependencies": { "babel-preset-react": "^6.5.0", "react": "^0.14.7", "react-dom": "^0.14.7" }, "devDependencies": { "babel-cli": "^6.6.5", "babelify": "^7.2.0", "webpack": "^1.12.14" } } webpack.config.js module.exports = { entry: "./entry.js", output: { filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" }, […]

尝试创buildReact应用程序时,请使用networking包问题

我试图运行React应用程序,下面一个教程, https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm ,但我有一些问题运行反应的应用程序。 更准确地说,当我inputnpm start时,请find下面的错误 npm ERR! Linux 4.4.0-62-generic npm ERR! argv "/usr/local/bin/node" "/usr/bin/npm" "start" npm ERR! node v7.4.0 npm ERR! npm v4.2.0 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! reactapp@1.0.0 start: `webpack-dev-server –port 7000 –hot` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the reactapp@1.0.0 start script 'webpack-dev-server […]

反应路由器打印在客户端反应空

我使用服务器端渲染的性能,但我的客户端不同的服务器端,因为我的客户端渲染首先<!– react-empty: 1 –>而不是组件,然后在客户端检测到校验和不同,它重新呈现应用程序,所以我失去了性能。 在这里,我问问题在哪里描述我的问题,并经过一些debugging后,我发现我的Router元素在我的根组件导致问题 render() { let history = browserHistory; if (this.props.store) { history = syncHistoryWithStore(browserHistory, props.store) } return ( <Provider store={store}> <Router history={history} routes={routes} /> </Provider> ); } 当我改变Router为简单的div元素它呈现div,但与路由器它不首先渲染我的元素,这将导致校验和不匹配和客户端重新呈现。 这是我的路线。 自从我使用延迟加载后,我已经写了这种方法。 export default { component: App, path: '/', indexRoute: { onEnter: (nextState, replace) => { replace('/sneakpeak') } }, childRoutes: [ { path: '/', […]

如何将JSON数据从Node.js res.render方法传递给客户机上的react.js

我使用node.js接受请求,从dynamodb获取数据,格式化/合并到一个现有的JSON模板对象并返回它。 当使用节点作为web服务,只是返回json,但是我正在testing在react.js中编写新的客户端代码。 我知道我可以做两个往返 – 首先加载没有JSON的页面,然后AJAX在react.js加载JSON,但我想在一个。 在节点中,我填充“filledTemplate”,我想返回JSON对象filledTemplate(通过Jade模板“窗体”),以便在客户端访问。 我可以把这个东西传给玉,但是我不确定那之后的下一步。 lib.pact.mergeDataIntoTemplate(formTemplateJSON,backgroundDatasetJSON, function(err, filledTemplate){ if(err) { console.log(err); } else{ res.render('forms', { title: 'Filled Forms', data: filledTemplate }); } }); 长话短说,我不知道如何在客户端传递/访问react.js(或者vanilla js)中的对象。 任何提示或指针将不胜感激。 (另外,显然没有react.js的标签,我不能添加它…如果别人想要)

nw reactjs requring在多个文件不起作用

问题- var React= require('react') var SomeComponent= require('./utils/SomeComponent') var Wrapper= React.createClass({ render: function(){ return <SomeComponent/> } }) //utils/SomeComponent.js: var React= require('react') module.exports= React.createClass({ //.. }) throws- Error: Invariant Violation: Wrapper.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. Error: Invariant Violation: Wrapper.render(): A valid ReactComponent must […]

反应回stream – 发电机使用Yeoman

我正在尝试使用yeoman生成器生成反应回stream项目,但是我收到以下错误。 我为此使用yeoman发生器,并通过npm安装了发生器 – 反应回stream。 pdc1-4s6zyr1:expProj administrator$ yo ? 'Allo administrator! What would you like to do? (Use arrow keys) Run a generator ❯ Angular Webapp React Reflux Karma Yeogurt Mocha (Move up and down to reveal more choices)/usr/local/lib/node_modules/yo/node_modules/configstore/index.js:86 ? 'Allo administrator! What would you like to do? React Reflux Make sure you are in the […]

react-typeahead – 不变的违规:addComponentAsRefTo(…)问题

节点v0.12.2 React v0.13.2 Npm v2.7.4 使用标准typeaheadinput会导致以下错误: 未捕获错误:不变违例:addComponentAsRefTo(…):只有ReactOwner可以有参考。 这通常意味着你正在尝试向没有所有者的组件添加ref(也就是说,不是在另一个组件的render方法中创build的)。 试着将这个组件放在一个新的顶层组件中,这个组件将会容纳参考。 这就是我如何实现这一点… Index.jsx有: 'use strict' var React = require('react'); var ReactTypeahead = require('react-typeahead').Typeahead var QuickSearch = React.createClass({ render: function () { return( <ReactTypeahead options={["spam", "foodbar"]}/> ); } }); var Topbar = React.createClass({ render: function() { return ( <QuickSearch /> ); } }); module.exports = Topbar; 然后在我的App.jsx中我有: 'use […]

如何使用npm封装javascript里面的反应组件

我正在尝试使用rc-calender进行反应。 https://www.npmjs.com/package/rc-calendar 我需要使用这个包的CSS。 我正在尝试使用这个如下。 require('rc-calendar/assets/bootstrap.css'); 但它是给我的 ParseError :意外的令牌。 我得到所有其他的CSS(从其他npm包)类似的错误。 任何想法如何使用这些CSS。

同构的应用程序没有拆分视图

在过去的几年中,我一直在MEAN栈上构build单页应用程序,并且非常喜欢它。 但是,默认情况下缺乏SEO,有时候一些性能问题对我来说是一个真正的问题。 所以我开始研究构build同构的应用程序。 我检查了这些教程: http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ http://engineering.devmag.io/post/1/creating-an-isomorphic-blogging-app-using-react-and-flux 用我目前的SPA构build,我有一个主index.html文件(包含body&head,header,footer,nav和脚本来加载),然后我有一个使用Angular的ng-view加载ng-view 。 这是非常容易维护前端的HTML作为一个页面的所有代码将在一个单一的视图文件。 然而,我看过的同构构build(使用React和Flux)的教程将html分割成模块,每个模块都有自己的文件并混合到javascript中。 我觉得这很难看,很难维护。 查看输出文件中的代码,很难看到结果页面的样子。 它看起来不是很有语义,似乎回到了一些老式的在PHP应用程序中构build模块化html的方法,而这些方法有些人曾经做过。 有没有办法维护我们从Angular SPA中获得的简单的路由和html视图结构,同时能够以同构的方式在服务器上呈现? 注意我不是简单地使用PhantomJS之类的东西来渲染服务器上的内容。 我仍然想要完整的同构体验,首先打到页面提供完全呈现的内容,然后后续交互在客户端执行JavaScript。