Questions tagged «reactjs»

React（也称为React.js或ReactJS）是Facebook开发的用于构建用户界面的JavaScript库。它使用基于组件的声明式范例，旨在既高效又灵活。

30
使用React Router以编程方式导航
通过使用react-router我可以使用Link元素创建由React Router本机处理的链接。 我在内部看到它的呼唤this.context.transitionTo(...)。 我想导航。不是来自链接，而是来自下拉菜单（例如）。如何在代码中执行此操作？什么this.context啊 我看到了Navigationmixin，但是如果没有我可以这样做mixins吗？
30
在React JSX内部循环
我正在React中尝试执行以下操作JSX（其中ObjectRow是一个单独的组件）： <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> 我意识到并理解为什么这是无效的JSX，因为它JSX映射到函数调用。但是，由于来自模板领域并且是的新手JSX，所以我不确定如何实现上述目标（多次添加组件）。
1277 javascript  reactjs 
8
为什么通过Facebook Flux使用Redux？[关闭]
已关闭。这个问题是基于观点的。它当前不接受答案。 去年关闭。 已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新的答案或互动。 我已经阅读了这个答案，减少了样板，看了几个GitHub示例，甚至尝试了一点redux（待办事项应用程序）。 据我了解，官方的redux doc动机与传统的MVC架构相比具有优势。但是它没有提供以下问题的答案： 为什么要通过Facebook Flux使用Redux？ 这仅仅是编程风格的一个问题：功能性还是非功能性？还是问题出在redux方法之后的abilities / dev-tools中？也许缩放？还是测试？ 如果我说redux对于来自函数式语言的人来说是一种变化，那我是对的吗？ 为了回答这个问题，您可以比较实现Redux在通量和Redux上的动机点的复杂性。 以下是来自官方redux doc动机的动机点： 处理乐观更新（据我了解，这几乎不依赖于第5点。很难在Facebook流量中实现它吗？） 在服务器上渲染（facebook流量也可以做到这一点。与redux相比有什么好处吗？） 在执行路线转换之前获取数据（为什么不能在facebook流量中实现？有什么好处？） 热重载（React Hot Reload可能实现。为什么需要redux？） 撤消/重做功能 还有其他要点吗？像坚持状态...
24
如何将道具传递给{this.props.children}
我试图找到定义可以以一般方式使用的组件的正确方法： <Parent> <Child value="1"> <Child value="2"> </Parent> 当然，您可以想象<select>并<option>作为父本子组件之间的渲染逻辑。 对于这个问题，这是一个虚拟的实现： var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); 问题是，每当您用于{this.props.children}定义包装器组件时，如何将某些属性传递给其所有子组件？
19
您可以在不调用setState的情况下强制React组件重新渲染吗？
我有一个外部（组件），可观察的对象，我想听这些更改。当对象被更新时，它发出更改事件，然后我想在检测到任何更改时重新呈现该组件。 对于顶层，React.render这是可能的，但是在组件内不起作用（这是有道理的，因为该render方法仅返回一个对象）。 这是一个代码示例： export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } 在内部单击该按钮会调用this.render()，但这实际上并不是导致渲染发生的原因（您可以看到它在起作用，因为由创建的文本{Math.random()}不会更改）。但是，如果我只是打电话this.setState()而不是this.render()，它就可以正常工作。 所以我想我的问题是： React组件是否需要具有状态才能重新渲染？有没有一种方法可以在不更改状态的情况下强制组件按需更新？
685 reactjs  react-jsx 
10
为什么在Redux中我们需要中间件来实现异步流？
根据文档，“没有中间件，Redux存储仅支持同步数据流”。我不明白为什么会这样。为什么容器组件不能调用异步API，然后再调用dispatch操作？ 例如，想象一个简单的UI：一个字段和一个按钮。当用户按下按钮时，该字段将填充来自远程服务器的数据。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = new Promise((resolve) => { setTimeout(() => { resolve(Math.floor(Math.random() * 100)); }, …
12
了解React.js中数组子项的唯一键
我正在构建一个接受JSON数据源并创建可排序表的React组件。 每个动态数据行都有一个分配给它的唯一键，但是我仍然遇到以下错误： 数组中的每个子代都应具有唯一的“键”道具。 检查TableComponent的渲染方法。 我的TableComponent渲染方法返回： <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> 该TableHeader组件是单行，还分配有唯一键。 每个row输入rows都是通过具有唯一键的组件构建的： <TableRowItem key={item.id} data={item} columns={columnNames}/> 而TableRowItem看起来像这样： var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }, this); }.bind(this); return ( <tr>{ td(this.props.item) …
30
手动刷新或写入时，React-router网址不起作用
我正在使用React-router，当我单击链接按钮时，它可以正常工作，但是当我刷新网页时，它不会加载我想要的内容。 例如，我进去了localhost/joblist，一切都很好，因为我按链接到达这里。但是，如果刷新网页，则会得到： Cannot GET /joblist 默认情况下，它不是这样工作的。最初，我的URL为localhost/#/，localhost/#/joblist并且它们工作正常。但是我不喜欢这种URL，所以尝试删除它#，我写道： Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); 这个问题不会发生localhost/，这个总是返回我想要的。 编辑：这个程序是单页的，所以/joblist不需要向任何服务器询问任何内容。 EDIT2：我的整个路由器。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });
30
React js onClick无法将值传递给方法
我想阅读onClick事件值属性。但是当我单击它时，在控制台上会看到类似以下的内容： SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target 我的代码正常工作。运行时，我可以{column}在onClick事件中看到但无法获取它。 我的代码： var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { var that = this; return( <tr> {this.props.defaultColumns.map(function (column) { return ( <th value={column} onClick={that.handleSort} >{column}</th> ); })} {this.props.externalColumns.map(function (column) { // Multi dimension array …
24
渲染后如何在输入字段上设置焦点？
呈现组件后，将焦点设置在特定文本字段上的反应是什么？ 文档似乎建议使用引用，例如： ref="nameInput"在渲染功能中的输入字段上进行设置，然后调用： this.refs.nameInput.getInputDOMNode().focus(); 但是我应该在哪里称呼它呢？我已经尝试了几个地方，但无法正常工作。
30
React中state和props有什么区别？
我正在观看关于React的Pluralsight课程，并且讲师说道具不应该改变。我现在正在阅读有关道具与状态的文章（uberVU / react-guide），它说 道具和状态更改都会触发渲染更新。 文章稍后会说： 道具（属性的缩写）是组件的配置，如果可以的话，它是选项。它们是从上方接收的，并且是不变的。 所以道具可以改变，但应该是不变的？ 什么时候应该使用道具，什么时候应该使用状态？ 如果您有React组件所需的数据，则应通过prop或在React组件中通过setup进行设置getInitialState？
11
如何有条件地向React组件添加属性？
如果满足特定条件，是否有办法仅将属性添加到R​​eact组件？ 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中，但是由于readOnly =“ false”与完全省略该属性不同，因此我看不到如何解决此问题。 下面的示例应该解释我想要的内容，但是它不起作用（解析错误：意外的标识符）。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); …
29
在React中显示或隐藏元素
我第一次弄乱React.js，找不到通过click事件在页面上显示或隐藏内容的方法。我没有在页面上加载任何其他库，所以我正在寻找使用React库的本机方法。到目前为止，这就是我所拥有的。我想在click事件触发时显示结果div。 var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.