Tag: reactjs

Webpack / Babel / React生成错误：“未知选项：foo / node_modules / react / react.js.Children”: 我试图用webpackbuild立一个项目，并与这个webpackconfiguration作出反应： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'babel-polyfill', './app/less/main.less', './app/main.js', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: '/', filename: 'dist/main.js' }, debug: true, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'app'), loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.less$/, loader: "style!css!autoprefixer!less" }, […]

react-router：如何从URL获取参数值: 如何在我的routes.jsx文件中定义一个路由，以便在从其服务器redirect之后，通过Twitter单点login过程生成的URL中捕获__firebase_request_key参数值？ http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 我试着用下面的路由configuration，但是:redirectParam没有捕获提到的参数： <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

如何在React中更新父级的状态？: 我的结构如下所示：组件1 | – 组件2 | – 组件4 | – 组件5 组件3 组件3应根据组件5的状态显示一些数据。由于道具是不可变的，我不能简单地将它保存在组件1中并转发它，对吗？是的，我已经阅读了关于REDX，但不想使用它。我希望能够通过反应来解决这个问题。我错了吗？最好的感谢，Wojtek

如何从数组中获得前N个元素: 我正在使用JavaScript（ES6）/ FaceBook的反应，并试图获得数组的大小不一的前3个元素。我想做相当于Linq的（n）。在我的Jsx文件中，我有以下几点： var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); 然后得到我尝试的前三个项目 var map = new Map(list); map.size = 3; var items = map(i => { return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />); }); 这不起作用，地图没有设置function。你能帮忙吗？

ReactJS SyntheticEvent stopPropagation（）仅适用于React事件？: 我试图在ReactJS组件中使用event.stopPropagation（）来停止一个点击事件冒泡并触发一个点击事件，这个点击事件是在传统代码中使用JQuery附加的，但是好像React的stopPropagation（）只停止传播到事件也附加在React中，而JQuery的stopPropagation（）不会停止传播到React附带的事件。有什么办法让stopPropagation（）在这些事件中工作？我写了一个简单的JSFiddle来演示这些行为： http://jsfiddle.net/7LEDT/3/ /** @jsx React.DOM */ var Propagation = React.createClass({ alert: function(){ alert('React Alert'); }, stopPropagation: function(e){ e.stopPropagation(); }, render: function(){ return ( <div> <div onClick={this.alert}> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a> </div> <div className="alert"> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a> </div> <div onClick={this.alert}> <a href="#" className="stop-propagation">JQuery Stop Propagation […]

KeyJs中的KeyPress事件处理: var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding….'); } }, render: function(){ return( <div> <input type="text" id="one" onKeyPress={this.add} /> </div> ); } }); React.render(<Test />, document.body); 我如何使KeyPress事件在React JS中工作。当enter (keyCode=13)被按下时，它应该会enter (keyCode=13)警报。

按Enter键后再调用onChange事件: 我是新手引导，并坚持这个问题。我有一个input字段，只要input一个数字，onChange中的函数就会被调用，但是当我input整个数字时，按'Enter'时，我会调用它。 validationfunction的相同问题 – 它调用得太快。 var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", // bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true }); 谢谢！

反应：何时使用基于ES6类的组件与function性ES6组件？: 花了一些时间学习React后，我了解了创build组件的两个主要范例之间的区别我的问题是我应该什么时候使用哪一个，为什么？相互之间有什么好处/权衡？ ES6 / 7class： import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } function： const MyComponent = (props) => { return ( <div></div> ); } 我想在没有任何状态被这个组件所操纵的情况下是function性的……但是这样吗？我猜如果我使用任何生命周期方法，最好使用基于类的组件。

如何在React中为表单标签生成唯一的ID？: 我有label s的表单元素，我想要有唯一的ID链接label s与htmlFor属性的元素。像这样的东西： React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } }); 我曾经根据this._rootNodeID生成ID，但是自从React 0.13以后就不可用了。现在做最好的和/或最简单的方法是什么？