当我卷曲某些东西时，它可以正常工作：

curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  http://example.com/upload

我如何使其与axios一起正常工作？ 如果有问题，我正在使用react：

uploadURL (url) {
  return axios.post({
    url: 'http://example.com/upload',
    data: {
      url: url
    },
    headers: {
      'x-device-id': 'stuff',
      'Content-Type': 'multipart/form-data'
    }
  })
  .then((response) => response.data)
}

由于某些原因，这不起作用。

我想将字符串从Main传递到Header。 成功，但警告。 我是React的初学者，所以我不知道it must be a function是什么意思。

有人知道如何解决此警告吗？

警告是：

我的代码如下：

Main.js

import React from 'react';

import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';

const propTypes = {
  mainInfo: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    apps: React.PropTypes.array.isRequired,
  }),
};

class Main extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div>
        <Header title={this.props.mainInfo.title} />
        <AppList apps={this.props.mainInfo.apps} />
        <Footer />
      </div>
    );
  }
}

Main.propTypes = propTypes;

export default Main;

Header.js

import React from 'react';

const propTypes = {
  title: React.PropTypes.string.isRequred,
};

class Header extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div className="header">
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Header.propTypes = propTypes;

export default Header;

我正在做一个待办事项应用程序。 这是违规代码的非常简化的版本。 我有一个复选框：

 <p><input type="checkbox"  name="area" checked={this.state.Pencil}   onChange={this.checkPencil}/> Writing Item </p>

这是调用复选框的函数：

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
  }); 
  this.props.updateItem(this.state);
}

updateItem是映射为分派到redux的函数

function mapDispatchToProps(dispatch){
  return bindActionCreators({ updateItem}, dispatch);
}

我的问题是，当我调用updateItem操作并在console.log状态时，它总是落后1步。 如果未选中该复选框且该复选框不为true，则仍将状态为true传递给updateItem函数。 我需要调用另一个函数来强制状态更新吗？

我正在尝试创建一个新的react native项目，该项目应该使用旧版本的react-native。

我想要的结果是做类似的事情：0.1.4，但是它使用的react-native版本是0.13。

但是，使用0.1.4似乎没有任何选项可用于使用旧版本的react-native进行初始化。

执行0.1.4，然后在0.13中降级react-native也不起作用，因为init命令安装了用于构建应用程序的一堆xcode模板，并且没有dowgrade命令可以对这些模板进行降级。 （有一个upgrade命令。）

我尝试将我的react-native-cli版本降级到0.1.4，而当react-native 0.13是最新版本时，此版本是最新的，但这不起作用。 从cli源看，似乎总是使用最新版本的react-native进行初始化。

我意识到要以旧版本开始一个新项目很奇怪，但是我有一组奇怪的要求迫使这样做。

我在React文档中已经读到，“如果”类型语句不能在JSX代码中使用，由于JSX呈现到javascript中的方式，它无法按预期运行。

但是，有什么理由为什么实现“ if”组件是个坏主意？ 从我的最初测试来看，它似乎工作正常，并且使我想知道为什么不经常这样做？

我的部分意图是让响应开发尽可能地基于标记，并且使用尽可能少的javascript。 在我看来，这种方法更像是一种“数据驱动”方法。

您可以在JS Fiddle上查看

<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"></script>
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
    
var If = React.createClass({
  displayName: 'If',

  render: function()
  {
    if (this.props.condition)
      return <span>{this.props.children}</span>
    return null;
  }
});

var Main = React.createClass({
    render: function() {
        return (
           <div>
             <If condition={false}>
                <div>Never showing false item</div>
             </If>
             <If condition={true}>
                <div>Showing true item</div>
             </If>
          </div>
        );
    }
});

React.renderComponent(<Main/>, document.body);
</script>

运行上面的结果是：

显示真实物品

我有一个要通过REACT输出的对象

question = {
    text: "Is this a good question?",
    answers: [
       "Yes",
       "No",
       "I don't know"
    ]
} 

而我的react组件（已减少）是另一个组件

class QuestionSet extends Component {
render(){ 
    <div className="container">
       <h1>{this.props.question.text}</h1>
       {this.props.question.answers.forEach(answer => {     
           console.log("Entered");  //This does ifre                       
           <Answer answer={answer} />   //THIS DOES NOT WORK 
        })}
}

export default QuestionSet;

从上面的代码片段中可以看到，我正在尝试通过在props中使用数组Answers来插入组件Answer的数组，它确实令人陶醉，但没有输出到HTML中。

我正在尝试在React中实现一个List视图。我想要实现的是存储列表标头信息并注册组件并注册滚动事件。每次用户滚动窗口时，我都想取出存储的div并重新计算offsetTop数据。

现在的问题是，我发现控制台仅打印出初始值（该值是固定的，并且从未更改过）offsetTop数据在_instances函数中从未更改过。

有人建议如何从_instances对象获取最新的offsetTop吗？

import React, { Component } from 'react';
import ListHeader from './lib/ListHeader';
import ListItems from './lib/ListItems';

const styles = {
  'height': '400px',
  'overflowY': 'auto',
  'outline': '1px dashed red',
  'width': '40%'
};

class HeaderPosInfo {
  constructor(headerObj, originalPosition, originalHeight) {
    this.headerObj = headerObj;
    this.originalPosition = originalPosition;
    this.originalHeight = originalHeight; 
  }
}

export default class ReactListView extends Component {
  static defaultProps = {
    events: ['scroll', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll', 'resize', 'touchmove', 'touchend'],
    _instances:[],
    _positionMap: new Set(),
    _topPos:'',
    _topWrapper:''
  }

  static propTypes = {
    data: React.PropTypes.array.isRequired,
    headerAttName: React.PropTypes.string.isRequired,
    itemsAttName: React.PropTypes.string.isRequired,
    events: React.PropTypes.array,
    _instances: React.PropTypes.array,
    _positionMap: React.PropTypes.object,
    _topPos: React.PropTypes.string,
    _topWrapper: React.PropTypes.object
  };

  state = {
    events: this.props.events,
    _instances: this.props._instances,
    _positionMap: this.props._positionMap,
    _topPos: this.props._topPos
  }

  componentDidMount() {
    this.initStickyHeaders();
  }

  componentWillUnmount() {

  }

  componentDidUpdate() {

  }

  refsToArray(ctx, prefix){
    let results = [];
    for (let i=0;;i++){
      let ref = ctx.refs[prefix + '-' + String(i)];
      if (ref) results.push(ref);
      else return results;
    }
  }

  initHeaderPositions() {
    // Retrieve all instance of headers and store position info
    this.props._instances.forEach((k)=>{
      this.props._positionMap.add(new HeaderPosInfo(
          k, 
          k.refs.header.getDOMNode().offsetTop,
          k.refs.header.getDOMNode().offsetHeight
        ));
    });
    let it = this.props._positionMap.values();
    let first = it.next();
    this.props._topPos = first.value.originalPosition;
    this.props._topWrapper = first.value.headerObj;
  }

  initStickyHeaders () {
    this.props._instances = this.refsToArray(this, 'ListHeader');
    this.initHeaderPositions();

    // Register events listeners with the listview div
    this.props.events.forEach(type => {
      if (window.addEventListener) {
        React.findDOMNode(this.refs.listview).addEventListener(type, this.onScroll.bind(this), false);
      } else {
        React.findDOMNode(this.refs.listview).attachEvent('on' + type, this.onScroll.bind(this), false);
      }
    });
  }

  onScroll() {

    // update current header positions and apply fixed positions to the top one
    console.log(1);
    let offsetTop  = React.findDOMNode(this.props._instances[0].refs.header).offsetTop;

  }

  render() {
    const { data, headerAttName, itemsAttName } = this.props;
    let _refi = 0;
    let makeRef = () => {
      return 'ListHeader-' + (_refi++);
    };

    return (
      <div ref="listview" style={styles}>
      {
        Object.keys(data).map(k => {
        const header = data[k][headerAttName];
        const items  = data[k][itemsAttName];
          return (
            <ul key={k}>     
              <ListHeader ref={makeRef()} header={header} />
              <ListItems  items={items} />
            </ul>
          );
        })
      }
      </div>
    );
  }
}

整个源代码都在Github上，您可以从这里克隆并编译它：

Github

在Redux中，对存储的每次更改都会在所有连接的组件上触发notify。 这使开发人员的工作变得非常简单，但是如果您的应用程序具有N个连接的组件，并且N非常大，该怎么办？

商店的每次更改（即使与组件无关）仍会在商店的2702477354374530030050ed路径上运行notify，并进行简单的_.debounce测试。 很快，对吧？ 当然，也许一次。 但是N次，每次改变吗？ 设计上的这一根本性变化使我质疑Redux的真正可扩展性。

作为进一步的优化，可以使用_.debounce分批处理所有notify调用。即使如此，对每个商店更改进行N ===测试并处理其他逻辑（例如视图逻辑），似乎是一种解决方法。

我正在开发一个拥有数百万用户的健康与健身社交移动网络混合应用程序，并且正在从Backbone过渡到Redux。 在此应用程序中，向用户显示了可滑动界面，该界面使他们可以在类似于Snapchat的不同视图堆栈之间导航，但每个堆栈都具有无限深度。 在最流行的视图类型中，无限滚动器可以高效地处理提要项（如帖子）的加载，渲染，附加和分离。 对于一个敬业的用户来说，滚动浏览成百上千的帖子，然后输入一个用户的供稿，然后输入另一个用户的供稿，等等并不罕见。即使进行了大量的优化，连接的组件也会变得非常庞大。

现在，另一方面，Backbone的设计允许每个视图精确地听取影响它的模型，从而将N减小为常数。

我是否缺少某些东西，还是Redux在大型应用程序方面存在根本缺陷？

这是引起我麻烦的文件：

var Routers = React.createClass({

  getInitialState: function(){
    return{
      userName: "",
      relatives: []
    }
  },

  userLoggedIn: function(userName, relatives){
    this.setState({
      userName: userName,
      relatives: relatives,
    })
  },

  render: function() {
    return (
      <Router history={browserHistory}>
        <Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
        <Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
      </Router>
    );
  }
});

我正在尝试将新的this.state.relatives和this.state.userName通过这些路径传递到我的“提要”组件中。 但我收到此错误消息：

警告：[反应路由器]您不能更改； 这将是   被忽略

我知道为什么会这样，但是不知道我应该如何将状态传递给我的“ feed”组件。 在过去的5个小时里，我一直在尝试解决此问题，我已变得非常绝望！

请帮忙！谢谢

解：

下面的答案是有帮助的，我要感谢athors，但是它们并不是最简单的方法。就我而言，最好的方法是：更改路线时，您只需向其添加一条消息，如下所示：

browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});

或者如果您通过链接进行操作：

<Link 
    to={{ 
    pathname: '/pathname', 
    state: { message: 'hello, im a passed message!' } 
  }}/>

来源：[https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md]

在您尝试到达的组件中，然后可以像下面这样访问变量：

  componentDidMount: function() {
    var recievedMessage = this.props.location.state.message
  },

我希望这有帮助！ :)

是否可以组合嵌套有以下结构的减速器：

import 'user' from ...
import 'organisation' from ...
import 'auth' from ...
// ...

export default combineReducers({
  auth: {
    combineReducers({
        user,
        organisation,  
    }),
    auth,
  },
  posts,
  pages,
  widgets,
  // .. more state here
});

国家的结构如下：

{
    auth: {
        user: {
            firstName: 'Foo',
            lastName: 'bar',
        }
        organisation: {
            name: 'Foo Bar Co.'
            phone: '1800-123-123',
        },
        token: 123123123,
        cypher: '256',
        someKey: 123,
    }
}

其中...auth减速器具有以下结构：

{
    token: 123123123,
    cypher: '256',
    someKey: 123,   
}

所以也许散布算子很方便吗？ ...auth不确定:-(

说，我们在ES6中使用React。 我们将React和Component导入为

import React from 'react'
import { Component } from 'react'

为什么语法不同？ 我们不能按以下规定使用吗？

import Component from 'react'

我有一个复选框TSX（JSX）元素：

<input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} />

借助VS代码，我知道[ts] Type 'MouseEvent' is not generic.的输入参数类型为MouseEvent<HTMLInputElement>。因此，我使用以下代码实现了该代码：

private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) {
    ...
}

然后我收到一条错误消息，提示[ts] Type 'MouseEvent' is not generic.，如下图所示：

我的软件包的版本：

"@types/react": "^15.0.29",
"@types/react-dom": "^15.5.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.3.4",

这是为什么？

在Atom Editor中，我安装了以下插件

1. 短绒
2. 夹棉

看来他们不认识JSX语法。

我在命令行上运行它，但不得不使用其他插件，例如esprima-fb和eslint-plugin-react。看起来Atom Editor没有此类插件，并且想知道你们中是否有人知道如何解决此问题。

我将disable和prop-types与eslint-plugin-react结合使用。

我想要disable prop-types规则在一个文件中。

var React = require('react'); 
var Model = require('./ComponentModel');

var Component = React.createClass({
/* eslint-disable react/prop-types */
    propTypes: Model.propTypes,
/* eslint-enable react/prop-types */
    render: function () {
        return (
            <div className="component">
                {this.props.title}
            </div>
        );
    }
});

我正在尝试清除组件this.replaceState(this.getInitialState());，但找不到es6语法的引用。 我正在使用：

this.replaceState(this.getInitialState());

但是，这不适用于es6类语法。

我将如何获得相同的结果？

我正在使用React构建Minesweeper游戏，并且希望在单击单元格或双击单元格时执行其他操作。 当前，onDoubleClick函数将永远不会触发，显示onClick的警报。 如果我卸下onClick处理程序，则onDoubleClick可以工作。 为什么两个事件都不起作用？ 是否可以在一个元素上同时存在两个事件？

/** @jsx React.DOM */

var Mine = React.createClass({
  render: function(){
    return (
      <div className="mineBox" id={this.props.id} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}></div>
    )
  }
});

var MineRow = React.createClass({
  render: function(){
    var width = this.props.width,
        row = [];
    for (var i = 0; i < width; i++){
      row.push(<Mine id={String(this.props.row + i)} boxClass={this.props.boxClass} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}/>)
    }
    return (
      <div>{row}</div>
    )
  }
})

var MineSweeper = React.createClass({
  handleDoubleClick: function(){
    alert('Double Clicked');
  },
  handleClick: function(){
    alert('Single Clicked');
  },
  render: function(){
    var height = this.props.height,
        table = [];
    for (var i = 0; i < height; i++){
      table.push(<MineRow width={this.props.width} row={String.fromCharCode(97 + i)} onDoubleClick={this.handleDoubleClick} onClick={this.handleClick}/>)
    }
    return (
      <div>{table}</div>
    )
  }
})

var bombs = ['a0', 'b1', 'c2'];
React.renderComponent(<MineSweeper height={5} width={5} bombs={bombs}/>, document.getElementById('content'));

我一直在尝试找出管理我的反应形式的最佳方法。 我尝试使用onChange触发操作并使用表单数据更新我的redux存储。 我还尝试创建本地状态，并在提交表单时触发并操作并更新redux存储。

我应该如何管理我的受控输入状态？

也许我没有全神贯注于redux，但是我看到的所有示例并没有在容器之间真正访问过多状态，因此我没有看到store.getState（）的大量使用，但是即使您想要 调度，您需要访问商店，对不对？

因此，除了导入从“路径/到/商店/商店”导入商店

在每个我想要getState（）或“ dispatch”的文件中，如何访问该状态，因为如果不包含它，则存储是未定义的。

我想问一下如何处理本机句柄或做响应字体。 例如，在iPhone 4s中，我的fontSize：14，而在iPhone 6中，我的fontSize：18。

我看到了 它抱怨的不是什么谜：

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

我是SomeOtherComponent和this.props.value的作者。但是后者使用的是外部依赖项（来自SomeOtherComponent的ReactTooltip）。 这可能不是一个外部依赖关系，但这不是必须的，但是它让我在这里尝试说“是某些不受我控制的代码”。

考虑到嵌套组件工作正常（貌似），我应该为这个警告感到多担心？ 而且无论如何我将如何进行更改（前提是我不想重新实现外部依赖项）？ 是否有我尚未意识到的更好的设计？

为了完整起见，这里是SomeOtherComponent的实现。它仅呈现this.props.value，并且在悬停时：提示“ Some tooltip message”的工具提示：

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

谢谢。