React 组件中的 AngularJS 过滤器

AngularJS filter in React Component

本文关键字：AngularJS 过滤器 组件 React      更新时间：2023-09-26

我对ReactJS完全陌生，但我喜欢它在AngularJS上的出色性能。我的问题是，在 AngularJS 中，我们在渲染表达式或模型之前在视图模板中使用过滤器，我们如何在 ReactJS 中实现这一点。现在我正在尝试将一些视图部分替换为 React 组件（它仍然在 AngularJS 中）。

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

<div ng-init='{messageWithAngularEmoji = "This is a :smile:"}'>
     <p ng-bind="{messageWithAngularEmoji | emoji | to_trusted }"></p>
</div>

在上面的例子中，你可以看到我使用了两个过滤器：表情符号和to_trusted。如何在 ReactJS 中实现这一点？

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

经过一番搜索，我找到了在角度之外检索角度滤波器的方法，所以在您的情况下，这应该可以做一个技巧：

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>
    );
}

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

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

成为

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

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

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

你可能不需要to_trusted因为这可能指的是SCE，它是角度的一部分。

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

使用 ReactJS 编写货币过滤器

货币.js 

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

组件.js

export default function FundsAmount() {
    let amount = 2345.43
    return (
        <span>{ currency(amount) }</span>
    )
}

这将输出：

$2,345.43
相关文章：