React组件中的AngularJS过滤器

Question

我对ReactJS完全不熟悉,但我喜欢它在AngularJS上的出色表现.我的问题是,在AngularJS中,我们在渲染表达式或模型之前在视图模板中使用过滤器,我们如何在ReactJS中实现它.现在我正在尝试将几个视图部件替换为React Components(仍然在AngularJS中).

例如,现在我的下面的角度代码可以很好地在p标签中呈现表情符号,

<div ng-init='{messageWithAngularEmoji = "This is a :smile:"}'>

     <p ng-bind="{messageWithAngularEmoji | emoji | to_trusted }"></p>

</div>

在上面的例子中,您可以看到我使用了两个过滤器:表情符号和to_trusted.我怎样才能在ReactJS中实现这一目标？

注意:我无法在React中重写这些过滤器.

Answer 1

经过一番搜索后,我找到了在角度以外检索角度滤波器的方法,所以在你的情况下,这应该是一个技巧:

render: function() {
    var injector = angular.element("div[ng-controller]").injector(); 
    var emoji = injector.get('emojiFilter'); 
    var message = 'This is a :smile:';
    return (
        <div>
            <p>{emoji(message)}</p>
        </div>
    );
}

Answer 2

在角度中,过滤器只是一种非常人为的调用函数的方法.

module.filter('emoji', function(){
  return function(x){
    /* stuff */
  };
});

变

function emoji(x){
    /* stuff */
};

React只是JavaScript,所以你定义函数并使用它们.

<p>{to_trusted(emoji(messageWithAngularEmoji))}</p>

您可能不需要to_trusted,因为这可能是指SCE,它是角度的一部分.