目前，我尝试将AngularJS应用与React进行整合。
我使用以下库https://github.com/davidchang/ngReact
使用watch-depth时，我希望当AngularJS的范围数据发生变化时，React组件将重新呈现。
我的代码看起来像这样
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="build/commentbox.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', ['react']);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
setTimeout(function() {
alert('assign data! how to trigger react component?');
$scope.data = {data : [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
]};
}, 5000);
});
app.value('CommentBox', CommentBox);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<react-component name="CommentBox" props="data" watch-depth="reference"/>
</div>
</body>
</html>
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
// tutorial10.js
var CommentList = React.createClass({
render: function() {
console.log("DEBUG");
console.log(this.props);
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
</div>
);
}
});
无论我使用watch-depth="reference"还是watch-depth="value"，都没有区别。当值分配给React
$scope.data组件不会自行呈现
我有什么遗漏的吗？
答案 0 :(得分：0)
使用$scope.data.push()添加新数据和观看深度=＆＃34;值＆＃34;
它会重新渲染。