Tag: reactjs

为什么以及何时需要在React中绑定函数和eventHandlers？

class SomeClass extends Component{ someEventHandler(event){ } render(){ return <input onChange={——here——}> } } 我看到——here——部分的不同版本。 // 1 return <input onChange={this.someEventHandler.bind(this)}> // 2 return <input onChange={(event) => { this.someEventHandler(event) }> // 3 return <input onChange={this.someEventHandler}> 这些版本有什么不同？ 还是只是一个偏好问题？ 谢谢大家的回答和意见。 所有这些都是有帮助的，我强烈build议阅读这个链接第一，如果你对我感到困惑。 http://blog.andrewray.me/react-es6-autobinding-and-createclass/

在符号（@）在ES6的JavaScript做什么？ （ECMAScript 2015）

我正在查看一些ES6代码，我不明白@符号放在variables前面的作用。 我能find的最接近的东西与私人领域有什么关系？ 我正在从redux库中查看代码： import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'redux/react'; import Counter from '../components/Counter'; import * as CounterActions from '../actions/CounterActions'; @connect(state => ({ counter: state.counter })) export default class CounterApp extends Component { render() { const { counter, dispatch } = this.props; return […]

React App中的“SyntaxError：意外的标记<在位置0的JSON中”

在处理类似Facebook的内容提要的React应用程序组件中，我遇到了一个错误： Feed.js：94 undefined“parsererror”“SyntaxError：意外的标记<JSON在位置0 我遇到了一个类似的错误，这个错误在render函数中是HTML中的一个错误，但在这里似乎并不是这样。 更令人困惑的是，我把代码回滚到了一个早期的已知工作版本，而且我仍然遇到了错误。 Feed.js： import React from 'react'; var ThreadForm = React.createClass({ getInitialState: function () { return {author: '', text: '', included: '', victim: '' } }, handleAuthorChange: function (e) { this.setState({author: e.target.value}) }, handleTextChange: function (e) { this.setState({text: e.target.value}) }, handleIncludedChange: function (e) { this.setState({included: e.target.value}) }, handleVictimChange: function (e) { this.setState({victim: […]

“只有ReactOwner可以参考”是什么 意思？

我有一个简单的react组件： var AddAppts = React.createClass({ handleClick: function() { var title = this.refs.title.getDOMNode().value; …. var appt = { heading: title … } CalendarActions.addAppointment(appt); }, render: function() { return ( <div> <label>Description</label> <input ref="title"></input> … </div> ); } }); module.exports = AddAppts; 我正在尝试render这个组件在另一个react组件： var AddAppt = require('./AddAppts'); render: function() { return ( <div> <AddAppt /> </div> ); […]

reactjs给出错误Uncaught TypeError：超级expression式必须为null或函数，而不是未定义的

我正在使用reactjs。 当我在浏览器下面运行代码时说： Uncaught TypeError：超级expression式必须为null或函数，而不是未定义的 任何暗示什么是错的将不胜感激。 首先是用来编译代码的行： browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js 和代码： var React = require('react'); class HelloMessage extends React.Component { render() { return <div>Hello </div>; } } 更新：在这个问题上在地狱火燃烧三天后，我发现我没有使用最新版本的反应。 全局安装： sudo npm install -g react@0.13.2 本地安装： npm install react@0.13.2 确保浏览器也使用正确的版本： <script type="text/javascript" src="react-0.13.2.js"></script> 希望这可以拯救别人三天的宝贵生命。

Reactfunction无状态组件，PureComponent，组件; 有什么区别，什么时候应该用什么？

知道从React v15.3.0开始 ，我们有了一个名为PureComponent的新的基类， 用于内置PureRenderMixin 。 我所理解的是，在这个引擎之下，我们在shouldComponentUpdate里面使用了一个比较简单的道具。 现在我们有3种方法来定义一个React组件： 没有扩展任何类的function性无状态组件 一个扩展了PureComponent类的组件 一个扩展Component类的正常组件 一段时间以前，我们曾经把无状态组件称为纯组件，甚至是哑组件。 看起来像“纯”这个词的整个定义现在已经在React中改变了。 虽然我理解这三者之间的基本差异，但我仍然不确定何时select什么 。 另外，每个方面的性能影响和权衡是什么？ 更新 ： 这些是我希望得到澄清的问题： 我应该select将我的简单组件定义为function性（为了简单起见）还是扩展PureComponent类（为了性能）？ 性能提升，我得到一个真正的权衡，我失去了简单性？ 当我总能使用PureComponent来获得更好的性能时，是否需要扩展正常的Component类？

在react-router v4中嵌套路由

我在我的应用程序中将反应路由器升级到版本4。 但现在我得到了错误 Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 这个路由有什么问题？ import { Switch, BrowserRouter as Router, Route, IndexRoute, Redirect, browserHistory } from 'react-router-dom' render(( <Router history={ browserHistory }> <Switch> <Route path='/' component={ Main }> <IndexRoute component={ Search } /> <Route path='cars/:id' component={ Cars […]

应用className / onClick / onChange在自定义React组件上不起作用

我几乎是新的react 。 我正在尝试创build一个简单的编辑和创build蒙版。 这里是代码： import React, { Component } from 'react'; import Company from './Company'; class CompanyList extends Component { constructor(props) { super(props); this.state = { search: '', companies: props.companies }; } updateSearch(event) { this.setState({ search: event.target.value.substr(0,20) }) } addCompany(event) { event.preventDefault(); let nummer = this.refs.nummer.value; let bezeichnung = this.refs.bezeichnung.value; let id = Math.floor((Math.random()*100) + […]

将脚本标记添加到React / JSX

我有一个相对简单的问题，尝试将内联脚本添加到React组件。 我到目前为止： 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script> </article> </DocumentTitle> ); } }; […]

Uncaught TypeError：无法读取未定义的属性“setState”

我收到以下错误 Uncaught TypeError：无法读取未定义的属性“setState” 即使在构造函数中绑定delta之后。 class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }