使用ngReact,如何优雅地实现双向数据绑定?
假设我有一个简单的React输入组件,它需要一个value并调用onChange它.
angular.module('app', []).value('SimpleInput', props =>
<input type='text'
value={props.value}
onChange{e => props.onChange(e.target.value)} />
)
Run Code Online (Sandbox Code Playgroud)
然后我希望像这样的东西更新value范围.
<react-component name="SimpleInput"
props="{value: value, onChange: v => value = v}">
</react-component>
Run Code Online (Sandbox Code Playgroud)
但是,有自动/更优雅的方式吗?
最近我发现了一个很棒的库,允许在Angular应用程序中使用React组件,称为ngReact
我的问题是关于可以在reactDirective组件上声明的watch-depth属性:
<body ng-app="app">
<div ng-controller="helloController">
<hello-component watch-depth="reference" fname="person.fname" lname="person.lname"></hello-component>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
查看reactDirective服务的 ngReact文档,我看到watch-depth有3个可能的值:
在我使用ngReact的初步探索中,我一直坚持使用默认值选项.
我的问题是,这些类型之间有什么区别?
当每个手表深度类型理想使用时的简单示例将是伟大的!
使用JsxBundleConfig构建JSX,使用角度ngReact指令渲染角度内的反应.每次我试图包含一个react-component时,错误无法读取属性'render'的undefined出现在控制台中,并且没有呈现任何内容