Question

我将我的数据存储在角度控制器中，我的反应组件正在使用，问题是当我更改数据时，我的反应组件是我的根组件将不会重新渲染。我正在尝试使用componentWillReceiveProps但是这个组件是用<react-component>而不是常规方式调用所以我认为不会起作用。我试过watch-depth =“reference / value”但仍然没有帮助。有人告诉我应该怎么做我强迫我的组件重新渲染？

控制器：

    app.controller('MainCtrl', function ($scope) {
        $scope.myComponent = {};
        console.log($scope.myComponent);
        console.log(document.body.children[0].children[0]);
        $scope.resultProps = {
            item:[]
        }
        $scope.firstArrayProps =  {
            item:[],
            result:$scope.resultProps
        }
        $scope.secondArrayProps =  {
            item:[],
            result:$scope.resultProps
        }

        $(document.body.children[0].children[0]).keydown(function(e) {
            console.log('voala');
            var key = e.which || e.keyCode;
            if(key == 46) {
                console.log('voala');
                setTimeout(function () {
                    $scope.firstArrayProps.item.length = 0; //HERE IM CHANGING DATA
                }, 1000);
            }
        });
...

反应成分：

var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
....

HTML：

<body  ng-app="app" ng-controller="MainCtrl as mainCtrl">

<div class="tableWrapper">
    <react-component name="DiaryTable" props="firstArrayProps"  watch-depth="value"/>
</div>

<button class="myMergeButton" id="mergeButton" ng-click="runMerge()">Merge diaries</button>

<div class="tableWrapper">
    <react-component name="DiaryTable" props="secondArrayProps" watch-depth="value"/>
</div>
...

Answer 1

应使用AngularJS ng-keydown指令添加Keydown处理程序。

<div class="tableWrapper" ng-keydown="voala($event)">
    <react-component name="DiaryTable" 
                     props="firstArrayProps"  
                     watch-depth="value">
    </react-component>
</div>

然后将该功能添加到控制器：

app.controller('MainCtrl', function ($scope, $timeout) {

    $scope.voala = function(e) {
        console.log('voala');
        var key = e.which || e.keyCode;
        if(key == 46) {
            console.log('voala');
            $timeout(function () {
                //HERE IM CHANGING DATA
                $scope.firstArrayProps.item.length = 0;
            }, 1000);
        }
    });
});

ng-keydown指令和$timeout服务都与AngularJS摘要周期正确集成。

使用ngreact重新渲染角度数据的组件

1 个答案: