Questions tagged «reactjs»

在React（Facebook的框架）中，我需要使用standard for属性渲染绑定到文本输入的label元素。 例如，使用以下JSX： <label for="test">Test</label> <input type="text" id="test" /> 但是，这将导致HTML缺少必需的（和标准的）for属性： <label>Test</label> <input type="text" id="test"> 我究竟做错了什么？

250 reactjs  label 

编辑：这是重复项，请参阅此处 设置状态时，找不到任何使用动态键名的示例。这就是我想做的： inputChangeHandler : function (event) { this.setState( { event.target.id : event.target.value } ); }, 其中event.target.id用作要更新的状态键。在React中这不可能吗？

248 javascript  reactjs  computed-properties 

是否存在使用原型的内置方法，以确保传递给组件的对象数组实际上是特定形状的对象数组？ 也许是这样的？ annotationRanges: PropTypes.array(PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number.isRequired, })), 我在这里想念什么超级明显吗？似乎将受到高度追捧。

244 arrays  reactjs  react-proptypes 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引文回答。 去年关闭。 改善这个问题 我最近才发现Redux。一切看起来不错。在Redux上使用Redux是否有任何弊端，陷阱或妥协？谢谢

243 reactjs  redux  flux  reactjs-flux 

我有一个组件，可以接收其大小的道具。该prop可以是字符串，也可以是数字ex："LARGE"或17。 我可以让React.PropTypes知道在propTypes验证中这可以是另一个吗？ 如果未指定类型，则会收到警告： prop type `size` is invalid; it must be a function, usually from React.PropTypes. MyComponent.propTypes = { size: React.PropTypes }

243 reactjs  react-proptypes 

如何在JSX中选择性地包含元素？这是一个使用横幅的示例，如果已传递该横幅，则该横幅应位于组件中。我要避免的是必须在if语句中复制HTML标签。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); }

229 javascript  reactjs  react-jsx 

我正在用React学习Redux，偶然发现了这段代码。我不确定它是否特定于Redux，但在其中一个示例中我看到了以下代码片段。 @connect((state) => { return { key: state.a.b }; }) 虽然的功能connect非常简单明了，但是我@以前并不了解connect。如果我没有记错的话，它甚至都不是JavaScript运算符。 有人可以解释一下这是什么，为什么使用它？ 更新： 实际上，react-redux它的一部分用于将React组件连接到Redux存储。

226 javascript  reactjs  decorator  redux 

官方阵营文档状态“ React.PureComponent的shouldComponentUpdate()只有比较浅的对象”，并建议针对这一点，如果状态是‘深’。 鉴于此，React.PureComponent在创建React组件时，为什么有人应该偏爱它？ 问题： React.Component我们可能会考虑使用对性能有什么影响React.PureComponent？ 我猜 shouldComponentUpdate()的PureComponent执行只有浅薄的比较。如果是这种情况，难道不能将所述方法用于更深入的比较吗？ “此外，React.PureComponent会shouldComponentUpdate()跳过整个组件子树的道具更新”-这是否意味着道具更改被忽略了？ 如果有帮助的话，阅读该媒体博客会引起疑问。

224 reactjs  state 

我正在尝试了解react-redux的connect方法及其作为参数的功能。特别是mapStateToProps()。 以我的理解，其返回值mapStateToProps将是一个从状态派生的对象（因为它存在于商店中），其键将作为道具传递给目标组件（应用了connect的组件）。 这意味着目标组件所消耗的状态与存储在商店中的状态可能具有截然不同的结构。 问：可以吗？ 问：这是预期的吗？ 问：这是反模式吗？

219 javascript  reactjs  redux  react-redux 

在开始使用React.js之后，它似乎props是静态的（从父组件传入），而state基于事件的更改则似乎是静态的。但是，我在文档中注意到对的引用componentWillReceiveProps，其中具体包括以下示例： componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } 这似乎意味着，性能可以改变根据的比较组件nextProps来this.props。我想念什么？道具如何更改，或者我误认为道具的调用位置？

217 javascript  reactjs  properties 

我们如何this.props.history.push('/page')在React-Router v4中传递参数？ .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

216 reactjs  react-router 

我有以下结构： FormEditor-包含多个FieldEditor- FieldEditor编辑表单的字段并在其状态下保存有关该字段的各种值 在FormEditor中单击按钮时，我希望能够从所有FieldEditor组件中收集有关字段的信息，处于其状态的信息，并将其全部包含在FormEditor中。 我考虑过将有关字段信息的信息存储在FieldEditor的状态之外，FormEditor而是将其置于的状态。但是，这将需要FormEditor在FieldEditor组件的每个组件发生更改时侦听它们并以其状态存储其信息。 我不能只访问儿童州吗？理想吗？

214 javascript  reactjs 

有没有办法将一个组件传递到另一个React组件？我想创建一个模型react组件，并传入另一个react组件以包含该内容。 编辑：这是一个reactJS codepen，说明了我正在尝试做的事情。http://codepen.io/aallbrig/pen/bEhjo 的HTML <div id="my-component"> <p>Hi!</p> </div> ReactJS /**@jsx React.DOM*/ var BasicTransclusion = React.createClass({ render: function() { // Below 'Added title' should be the child content of <p>Hi!</p> return ( <div> <p> Added title </p> {this.props.children} </div> ) } }); React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

214 javascript  reactjs 

如何使onKeyPress事件在ReactJS中起作用？当enter (keyCode=13)按下时，它应该发出警报。 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);

214 javascript  reactjs  keypress  onkeypress 

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"] 这些都不起作用。

213 javascript  facebook  reactjs