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，它是角度的一部分。

Answer 3

此问题已得到正确回答。我希望为像我这样的未来读者使用ES6提供不同的视角。

使用ReactJS编写货币过滤器

<强> currency.js

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

<强> component.js

export default function FundsAmount() {
    let amount = 2345.43

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

这将输出：

$2,345.43

React组件中的AngularJS过滤器

3 个答案: