Tag: reactjs
反应标签元素
在React（Facebook框架）中，我需要使用标准for属性呈现绑定到文本input的标签元素。 例如使用以下JSX： <label for="test">Test</label> <input type="text" id="test" /> 但是，这会产生HTML缺less所需（和标准） for属性： <label data-reactid=".1.0.0">Test</label> <input type="text" id="test" data-reactid=".1.0.1"> 我究竟做错了什么？
反应this.setState不是一个函数
我是React中的新成员，我试图编写一个使用API的应用程序。 我不断收到此错误： TypeError：this.setState不是我尝试处理API响应时的函数 。 我怀疑这是绑定有什么问题，但我不知道如何解决这个问题。 这是我的组件的代码： var AppMain = React.createClass({ getInitialState: function() { return{ FirstName: " " }; }, componentDidMount:function(){ VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); }, '5.34'); }, render:function(){ return ( <div className="appMain"> <Header /> </div> ); […]
如何访问React中的儿童状态？
我有以下结构： FormEditor – 保存多个FieldEditor FieldEditor – 编辑表单的一个字段并保存其状态的各种值 当在FormEditor中单击一个button时，我希望能够收集有关所有FieldEditor组件中的字段的信息，处于其状态的信息，并将其全部包含在FormEditor中。 我考虑将FieldEditor状态以外的字段信息存储FieldEditor ，并将其置于FormEditor的状态。 但是，这将需要FormEditor来监听它们的每个FieldEditor组件，因为它们将信息更改并存储在状态中。 我不能只是访问儿童的状态吗？ 这是理想的吗？
反应带形状的proptype数组
有没有内置的方式来使用proptypes，以确保传递给组件的对象数组实际上是一个特定形状的对象数组？ 也许这样？ annotationRanges: PropTypes.array(PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number.isRequired, })), 我在这里错过了超级明显的东西吗？ 似乎这将是高度追捧。
使用可选的path参数响应路由器
我想声明一个可选path参数的path，因此当我添加页面做额外的事情（例如填充一些数据）： http：// localhost / app / path / to / page <=渲染页面http：// localhost / app / path / to / page / pathParam <=根据pathParam渲染页面 在我的反应路由器中，我有以下path，以支持这两个选项（这是一个简化的例子）： <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 我的问题是，我们可以在一条路线上宣布吗？ 如果我只添加第二行，那么没有find没有参数的路由。 编辑＃1： 这里提到的关于下面的语法的解决scheme对我来说不起作用，这是一个合适的吗？ 它是否存在于文档中？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 我的反应路由器版本是：1.0.3
ReactJS：build模双向无限滚动
我们的应用程序使用无限滚动浏览大型异构项目列表。 有几个皱纹： 我们的用户通常有10,000个项目的列表，需要滚动3k +。 这些是丰富的项目，所以在浏览器性能变得不可接受之前，我们在DOM中只能有几百个。 项目是不同的高度。 这些项目可能包含图像，我们允许用户跳转到特定的date。 这很棘手，因为用户可以跳转到列表中需要在视口上方加载图像的点，这会在加载内容时将内容向下推。 如果处理不好，就意味着用户可能会跳到一个date，但会被转移到更早的date。 已知，不完整的解决scheme： https://github.com/guillaumervls/react-infinite-scroll-这只是一个简单的“当我们碰到底部时加载更多”组件。 它不会剔除任何DOM，所以会死在成千上万的物品上。 http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html – 显示如何存储和恢复滚动的位置，当插入顶部或插入底部，但不是两个在一起。 我没有寻找一个完整的解决scheme的代码（虽然这将是伟大的。）相反，我正在寻找“反应的方式”来模拟这种情况。 是否滚动位置状态？ 我应该跟踪哪个状态以保留我在列表中的位置？ 我需要保持什么状态，以便在滚动显示的底部或顶部附近时触发新的渲染？
React.js：用一个onChange处理程序识别不同的input
好奇什么正确的方法来处理这个问题是： var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, document.getElementById('content')); 显然你可以创build单独的handleChange函数来处理每个不同的input，但这不是很好。 同样，你可以创build一个组件，只是为了一个单独的input，但我想看看是否有办法做到这一点。
React，ES6 – getInitialState是在一个普通的JavaScript类上定义的
我有以下组件（ radioOther.jsx ）： 'use strict'; //module.exports = <– omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); if (prevState.otherChecked !== otherRadBtn.checked) { console.log('Other radio […]
如何将多个类添加到ReactJS组件
我是ReactJS和JSX的新手，我在下面的代码中遇到了一些问题。 我试图添加多个类到每个li上的classNames属性： <li key={index} className={activeClass, data.class, "main-class"}></li> 我的React组件是： var AccountMainMenu = React.createClass({ getInitialState: function(){ return { focused: 0 }; }, clicked: function(index){ this.setState({focused: index}); }, render: function() { var self = this; var accountMenuData = [ { name : "My Account", icon : "icon-account" }, { name:"Messages", icon:"icon-message" }, { name:"Settings", icon:"icon-settings" } /*{ name:"Help […]
如何从React中的事件对象访问自定义属性？
React能够呈现自定义属性，如http://facebook.github.io/react/docs/jsx-gotchas.html所述 ： 如果你想使用自定义属性，你应该用data-作为前缀。 <div data-custom-attribute="foo" /> 这是个好消息，除非我找不到从事件对象访问它的方法，例如： render: function() { … <a data-tag={i} style={showStyle} onClick={this.removeTag}></a> … removeTag: function(event) { this.setState({inputVal: event.target????}); }, 元素和data-属性呈现在HTML罚款。 像style标准属性可以作为event.target.style罚款。 而不是event.target我试过了： event.target.props.data.tag event.target.props.data["tag"] event.target.props["data-tag"] event.target.data.tag event.target.data["tag"] event.target["data-tag"] 这些都没有工作。
