Tag: reactjs

如何告诉webpack dev服务器为任何路由提供index.html: React路由器允许反应应用程序处理/arbitrary/route 。为了这个工作，我需要我的服务器发送任何匹配路线上的React应用程序。但是webpack dev服务器不处理任意的端点。这里有一个解决scheme使用额外的快递服务器。如何允许webpack-dev-server允许来自react-router的入口点但我不想启动另一个快速服务器来允许路由匹配。我只是想告诉webpack开发服务器匹配任何url，并发送给我我的反应的应用程序。请。

React.js的JSX语法中双花括号的用途是什么？: 在react.js教程中，我们看到了双花括号的使用： <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> 然后在第二个教程“思考反应”中： <span style={{color: 'red'}}> {this.props.product.name} </span>; 但是， React JSX文档没有描述或提到双花括号。这是什么语法（双曲）？还有另一种方式expression在jsx相同的事情，或者这只是从文档中的遗漏？

用ReactJS上传文件组件: 我一直在寻找帮助，使一个组件帮助pipe理上传文件从React到我设置的端点。我已经尝试了很多选项，包括整合http://filedropjs.org 。我决定反对它，因为我没有控制它在DOM中使用new FileDrop('zone', options);设置的元素new FileDrop('zone', options); 这是我迄今为止： module.exports = React.createClass({ displayName: "Upload", handleChange: function(e){ formData = this.refs.uploadForm.getDOMNode(); jQuery.ajax({ url: 'http://example.com', type : 'POST', xhr: function(){ var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; }, data: formData, cache: false, contentType: false, processData: false, success: function(data){ alert(data); } }); }, render: function(){ return […]

如何同步Redux状态和URL哈希标签参数: 我们有一个讲座和章节的列表，用户可以select和取消select它们。这两个列表存储在一个还原存储中。现在我们想要在url的哈希标记中保留选定的演讲片段和章节片段的表示，并且对url的任何更改也会改变存储（双向同步）。使用react-router甚至react-router-redux最好的解决scheme是什么？我们无法find一些很好的例子，其中反应路由器仅用于维护URL的哈希标记，也仅更新一个组件。谢谢！！！

我怎样才能重置一个反应组件，包括所有可传递的状态？: 我偶尔会对想要重置的概念状态的组件做出反应。理想的行为相当于删除旧的组件，并读取一个新的，原始的组件。 React提供了一个方法setState ，它允许设置组件自己的显式状态，但不包括浏览器焦点和窗体状态等隐式状态，也排除了子组件的状态。捕捉所有的间接状态可能是一个棘手的任务，我宁愿严格而完全地解决它，而不是玩每一个令人惊讶的状态每一个新的一点点痣。有没有一个API或模式来做到这一点？编辑：我做了一个简单的例子，展示this.replaceState(this.getInitialState())方法，并与this.replaceState(this.getInitialState())方法进行对比： https : this.setState(this.getInitialState()) – replaceState更健壮。

如何从jQuery到React.js？: 我一直在读React了几天。我可以理解我所看到的大部分内容，但是我并不完全相信自己能够编写它。我一直在做一个小型的networking应用程序，通过jQuery完成所有的html代码，并将元素附加到对方。我想尝试用React重build，因为我相信它会更快。这个JSFiddle是我正在处理的事情的一个小例子。你会怎样用React写它？ JS： function remove() { this.remove(); } function timed_append_new_element() { setTimeout(function () { var added_content = $("<span />", { class: "added_content", text: "Click to close", click: remove }); container.append(added_content); }, 3000); } function append_new_element() { var added_content = $("<span />", { class: "timed_added_content", text: "Click to close", click: remove }); […]

如何在react.js中监听状态变化？: React.js中angular度的$ watch函数是什么？我想监听状态更改并调用getSearchResults（）之类的函数。 componentDidMount: function() { this.getSearchResults(); }

用React JS无限滚动: 我正在寻找方法来实现与React无限滚动。我遇到了react-infinite-scroll ，发现它效率不高，因为它只是向DOM添加节点，并且不删除它们。 React是否有经过validation的解决scheme，可以在DOM中添加，移除和维护不变的节点数量。这是jsfiddle问题。在这个问题中，我想在DOM中只有50个元素。其他人应该加载和删除作为用户上下滚动。我们已经开始使用React，因为它的优化algorithm。现在我找不到解决这个问题的方法。我遇到了airbnb无限的js 。但它是用Jquery实现的。要使用这个airbnb无限滚动，我必须松开我不想做的React优化。我想要添加滚动的示例代码是（这里我正在加载所有项目。我的目标是一次只加载50个项目） /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); var HelloList = React.createClass({ getInitialState: function() { var numbers = []; for(var i=1;i<10000;i++){ numbers.push(i); } return {data:numbers}; }, render: function(){ var response = this.state.data.map(function(contact){ return […]

ReactJS – 如何使用评论: React组件中的render方法不能使用注释吗？我有以下组件： 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se. <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> <UnorderedList /> </div> ) } […]

由于webpack中的CSS，摩卡testing失败: 我是摩卡新手，我正在尝试使用它来testing一个简单的React组件。如果反应组件没有任何CSS样式，testing会通过，但如果React组件中的标记包含任何className，则会引发语法错误： Testing.react.js import React from 'react'; export default class Testing extends React.Component { render() { return ( <section> <form> <input type="text" /> </form> </section> ); } } testing.jsx import { React, sinon, assert, expect, TestUtils } from '../../test_helper'; import TestingSample from '../../../app/components/Testing.react.js'; describe('TestingSample component', function(){ before('render and locate element', function(){ var renderedComponent = TestUtils.renderIntoDocument( […]