如何突出ReactJS中段落中的关键字？

Question

我在角度1.x中完成了这个，但我想知道如何在React js中突出显示动态单词。在角1.x我使用关键字

<td> <div highlight="var" keywords="somename">{{paragraph}}</div></td>

我使用下面的angular-highlight.js

完成了上面的html

angular.module('angular-highlight', [])
  .directive('highlight', function()
{

var component = function(scope, element, attrs) {

if (!attrs.highlightClass) {
    attrs.highlightClass = 'angular-highlight';
}

var replacer = function(match, item) {
    return '<span class="'+attrs.highlightClass+'">'+match+'</span>';
}
var tokenize = function(keywords) {
    keywords = keywords.replace(new RegExp(',$','g'), '').split(',');
    var i;
    var l = keywords.length;
    for (i=0;i<l;i++) {
        keywords[i] = '\\b'+keywords[i].replace(new RegExp('^ | $','g'), '')+'\\b';
    }
    return keywords;
}

scope.$watch('keywords', function() {
    //console.log("scope.keywords",scope.keywords);
    if (!scope.keywords || scope.keywords == '') {
        element.html(scope.highlight);
        return false;
    }


    var tokenized   = tokenize(scope.keywords);
    var regex       = new RegExp(tokenized.join('|'), 'gmi');

    //console.log("regex",regex);

    // Find the words
    var html = scope.highlight.replace(regex, replacer);

    element.html(html);
    });
      }
        return {
            link:           component,
             replace:        false,
               scope:          {
    highlight:  '=',
    keywords:   '='
           }
          };
              });

我已经像上面那样创建了angular.module。我想在反应中做同样的事情。