AngularJS filter in React Component

Question

I'm totally new to ReactJS, but I love its awesome performance over AngularJS. My question is, in AngularJS we use filters in the view templates before rendering the expression or model, how we can achieve that in ReactJS. Now I'm trying to replace few view parts as React Components(still it is in AngularJS).

For example, now my below angular code works fine to render a emoticon in p tag,

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

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

</div>

In the above example you can see I had used two filters: emoji and to_trusted. How can I achieve this in ReactJS ?

Note: I can't rewrite those filters in React.

Answer 1

After a little search I found the way to retrieve angular filter outside of angular, so in your case this should do a trick:

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