Question

使用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？

Answer 1

我不这么认为。 ngReact只是将React组件注入Angular框架的一种方法; React 专门设计为不具有支持性能的双向数据绑定，因此任何实现都必须是一种解决方法。

从马的口中：

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

Answer 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，就会获得输入框的值。

双向数据绑定到ngReact组件

2 个答案: