小编Ben*_*Ben的帖子

我刚接触使用带有React的ES6类,之前我已经将我的方法绑定到当前对象(在第一个示例中显示),但ES6是否允许我使用箭头将类函数永久绑定到类实例？(当作为回调函数传递时很有用.)当我尝试使用它时,我遇到错误,就像使用CoffeeScript一样:

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

因此,如果我要传递SomeClass.handleInputChange给setTimeout它,那么它将被限定为类实例,而不是window对象.

这是部分ES6问题部分反应问题.我正在尝试在React中使用带有ES6类和Babel的命名空间组件.所以我想真正的问题是如何命名空间es6类,所以我可以做这里解释的内容:https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

由于我收到意外的令牌错误:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^

我正在使用react-router,所以我在<Link />整个应用程序中使用该组件作为我的链接,在某些情况下我需要根据用户输入动态生成链接,所以我需要类似的东西 window.location,但没有页面刷新.

我找到了这个小笔记 - (https://github.com/rackt/react-router/issues/835) - 我尝试过使用,this.context.router.transitionTo(mylink)但我遇到了上下文问题...

这导致我(https://github.com/rackt/react-router/issues/1059),但上下文返回和空对象,所以当我尝试todo之类的东西:this.context.router.transitionTo(mylink);我得到Cannot read property 'transitionTo' of undefined(如果我尝试做类似的事情this.context =构造函数中的上下文).

不要拖延,但我也厌倦了过多的上下文,因为它没有故意记录,因为它仍然是一项正在进行的工作,所以我读过.

有没有人遇到类似的问题？

我正在使用需要JSON配置文件的第三方库,我需要将一些env变量作为键值传递.如果我像往常一样包括它们,例如:

  "s3": {
    "key": process.env.AWS_ACCESS_KEY_ID,
    "secret": process.env.AWS_SECRET_ACCESS_KEY,
    "bucket": process.env.S3_MLL_BUCKET_NAME,
    "destination": "/backups/database",
    "encrypt": false,
    "region": process.env.AWS_REGION
  }

......我收到错误:

SyntaxError: config/s3_backup.config.json: Unexpected token p

比方说,我在给定的路线上有一个组件 app.com/cars/1

我有一个链接到不同的汽车,例如侧边栏/cars/2,/cars/3等等.

我遇到的问题是当你改变链接时,比方说cars/1来cars/2,组件没有卸载,我被componentWillReceiveProps解雇了.如果我转到另一个具有不同组件的页面,比如说/trucks,该组件已卸载且一切正常.

如何在路线更改时卸载组件？我有各种状态和助焊剂的东西,我想清除下一辆车.或者如果没有卸载,人们会处理这类问题的典型方式吗？我无法想象这不是很常见.

(注意我正在使用react-router)

因为我们将onClick处理程序直接添加到组件中...例如:

<button onClick={dosomething}>Click</button>

当我们处理几十个元素时,是否有一种有效的方法(不向每个元素添加onClick)？

例如,在我的主干应用程序中,我只是将一个处理程序应用于一个类:

events:
 'click .someclass': 'doSomething'

骨干方式似乎更清洁,更易于管理.有没有办法用React组件模拟这种行为？

为了添加一些透视图,我已经说了十几个或更多的表单元素,当它们中的任何一个被更改时,我希望可能运行一些逻辑.它们可以是文本框,单选按钮等.

我只是从immutable.js开始，在弄清楚如何在数组中的对象上设置新属性时遇到了麻烦。我无法在此类更改的文档中找到任何示例。

我基本上只是想对此进行更改：

[{ 
  gitInfo: {id: 8001, host: '', …},
  module: {id: 24875, name: "blah", …}
}...]

对此：

[{ 
  gitInfo: {id: 8001, host: '', …},
  module: {id: 24875, name: "blah", isStared: true …}
}...]

因此，如果没有immutable.js，我将有类似以下内容：

function markModules(modules) {
    modules.map( (module) => {
      module.module.isStarred = false;
      if (contains(this.props.stars, module.module.id)) {
        module.module.isStarred = true;
      }
    })
    return modules;
  }

我假设我需要带有List的set（）之类的东西，但是同样，我没有找到任何执行此操作的示例。

感谢您提供的任何提示或示例链接。

我习惯使用Handlebars,有些建议使用React-y方法来模拟这样的东西(不一定是直接翻译,但是类似的效果):

var Beer = React.createClass({

  render: function(){

    return (

      <div className="media">
        <div className="media-body">
          {{#if beer.name}}<h4 className="media-heading">{beer.name}</h4>{{/if}}
          {{#if beer.icon}} <img className="media-object" src={beer.icon} />{{/if}}
          {{#if beer.style.name}}<p>{beer.style.name} </p>{{/if} 
            etc...
        </div>
      </div>

    )
  }
});


module.exports = Beer;

就我而言,我正在使用React.js,我想动态更新deployOptions对象中的值.

例如 -

初始状态如下:

getInitialState() {
    return {
      deployOptions: {
        config: null,
        action: 'deploy',
        env: 'qa'
      }
    }
  }

显然这是不正确的 - 但这正是我想要实现的目标

configOptionChange(option) {

    // option -> { key: 'env', value: 'prod' }

    this.setState({
      [deployOptions.option.key]: option.value
    });
  }

这样我的状态就会如此

{
    deployOptions: {
      config: null,
      action: 'deploy',
      env: 'prod' // only this changes
    }
}

我添加了一个里程碑选项,但我不再想使用它,但它仍会显示在下拉列表中.如何永久删除里程碑？

我无法找到解决方案.如何将下面的代码转换为更动态,更简洁的内容？

OneComponent = require ('./OneComponent')
TwoComponent = require ('./TwoComponent')
ThreeComponent = require ('./ThreeComponent')

Example = React.createClass

  render: -> 
    filter = @props.filterState

    if filter is 'something'
      tableCmpt = 
        <div>
          <OneComponent
            tasks={@props.tasks}
          />
        </div>

    if filter is 'somethingElse'
      tableCmpt = 
        <div>
          <TwoComponent
            tasks={@props.tasks}
          />
        </div>

    ##... etc

    return tableCmpt