AngularJS React 组件中的过滤器

Question

我是 ReactJS 的新手，但我喜欢它优于 AngularJS 的出色性能。我的问题是，在 AngularJS 中，我们在渲染表达式或模型之前在视图模板中使用过滤器，我们如何在 ReactJS 中实现它。现在我正在尝试将几个视图部分替换为 React 组件（它仍然在 AngularJS 中）。

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

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

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

</div>

在上面的示例中，您可以看到我使用了两个过滤器：emoji 和 to_trusted。我怎样才能在 ReactJS 中实现这一点？

注意：我无法在 React 中重写这些过滤器。

Answer 1

经过一番搜索后，我找到了在 angular 之外检索 angular 过滤器的方法，因此在您的情况下，这应该是一个技巧：

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

在 angular 中，过滤器只是一种非常人为的函数调用方式。

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

变成

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

React 只是 JavaScript，因此您定义函数并使用它们。

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

您可能不需要 to_trusted，因为它可能指的是 SCE，它是 angular 的一部分。

Answer 3

这个问题已经正确回答了。我想为像我这样的未来读者提供使用 ES6 的不同视角。

使用 ReactJS 编写货币过滤器

currency.js

export default function(value, decimalPosition = 2) {
    return '$' + value
        .toFixed(decimalPosition)
        .replace(/(\d)(?=(\d{3})+\.)/g, ',')
}

component.js

export default function FundsAmount() {
    let amount = 2345.43

    return (
        <span>{ currency(amount) }</span>
    )
}

这将输出：

,345.43

AngularJS React 组件中的过滤器

AngularJS filter in React Component

javascript

angularjs

reactjs