双向数据绑定到 ngReact 组件答案

【问题标题】：Two-way data binding to an ngReact component双向数据绑定到 ngReact 组件
【发布时间】：2015-07-09 22:48:02
【问题描述】：

使用 ngReact，如何优雅地设置双向数据绑定？

假设我有一个简单的 React 输入组件，它接受 value 并触发 onChange：

angular.module('app', []).value('SimpleInput', props => 
  <input type='text' 
         value={props.value}
         onChange{e => props.onChange(e.target.value)} />
)

然后从 AngularJS 方面，我希望这样的东西可以更新范围内的value：

<react-component name="SimpleInput" 
                 props="{value: value, onChange: v => value = v}">
</react-component>

但是，是否有一种更优雅的方式来设置到 AngularJS 范围的双向绑定，类似于 ng-model？

【问题讨论】：

标签： javascript angularjs javascript-databinding ngreact

【解决方案1】：

我不这么认为。 ngReact 只是将 React 组件注入 Angular 框架的一种方式； React 专门被设计为没有双向数据绑定以提高性能，因此任何实现都必然是一种变通方法。

从马口中：

ngReact 是一个 Angular 模块，它允许在 AngularJS 应用程序中使用 React 组件。这样做的动机可能是以下任何一种：您需要比 Angular 提供的性能更高的性能（双向数据绑定、Object.observe、页面上的范围观察者太多）...

【讨论】：

问题是关于从 AngularJS（到 ngReact 组件）的数据绑定，不过

【解决方案2】：

我对 ngReact 没有太多经验，但 React 的做法是使用 refs，并在需要时从 ref 中获取值。我不确定您的组件代码是什么样的，所以我只能猜测。如果组件内有输入字段，请执行以下操作：

var SimpleInput = React.createClass({

accessFunc: function(){
    //Access value from ref here.
    console.log(React.findDOMNode(this.refs.myInput).value);
},

render: function(){
    return (
        <input type="text" ref="myInput" />
    )
  }
})

但是，您也可以使用 linkState 将值绑定到状态变量：https://facebook.github.io/react/docs/two-way-binding-helpers.html

但是，我强烈建议使用第一种方式，因为 React 比 Angular 快得多的原因之一是它避免了双向绑定。不过，方法如下：

var SimpleInput = React.createClass({

getInitialState: function(){
    return {
        myInput: ''
    }
},

render: function(){
    return (
        <input type="text" valueLink={this.linkState('myInput')}/>
    )
  }
})

现在任何时候你访问 this.state.myInput，你都会得到输入框的值。

【讨论】：