ReactJS kullanarak metni vurgulayın

Sorguyla eşleşen metni vurgulamaya çalışıyorum, ancak etiketlerin metin yerine HTML olarak nasıl görüntüleneceğini anlayamıyorum.

var Component = React.createClass({
    _highlightQuery: function(name, query) {
        var regex = new RegExp("(" + query + ")", "gi");
        return name.replace(regex, "$1");
    },
    render: function() {
        var name = "Javascript";
        var query = "java"
        return (
            <div>
                <input type="checkbox" /> {this._highlightQuery(name, query)}
            </div>
        );
    }
});

Geçerli Çıktı: Java komut dosyası

İstenilen Çıktı: Java komut dosyası

4

7 cevap

İşte basit twoliner yardımcı yöntemim:

getHighlightedText(text, higlight) {
   //Split text on higlight term, include term itself into parts, ignore case
    var parts = text.split(new RegExp(`(${higlight})`, 'gi'));
    return {parts.map(part => part.toLowerCase() === higlight.toLowerCase() ? {part} : part)};
}

İstenen parçaların etiketleri ile vurgulandığı bir yayılma alanı döndürür. Bu, gerekirse diğer etiketi kullanmak için kolayca değiştirilebilir.

UPDATE: To avoid unique key missing warning, here is a solution based on spans and setting fontWeight style for matching parts:

getHighlightedText(text, higlight) {
   //Split on higlight term and include term into parts, ignore case
    let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
    return  { parts.map((part, i) => 
        
            { part }
        )
    } ;
}
15
katma
Bu eğitimde birisine de yardımcı olabilir: vladopandzic.com/react/creating-react- vurgulayıcı bileşenli
katma yazar Vlado Pandžić, kaynak
Bir şeyi işaret etmek istiyorum. Neden "parçaları" hala ayırıcıyı içerdiği konusunda kafam karışmıştı. Bir düşünün, string.split() her zaman ayırıcıyı dışlar. Sonuçta, regex'in bir yakalama grubuna sahip olduğu .split (regex) 'in yakalanan elemanları sonuçtaki diziye yerleştireceği süper özel bir durum vardır. İşte bu süper rastgele kenar davasıyla ilgili resmi belgelere bir link: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . "Sonucu ayırıcı parçalarını dahil etmek için bir RegExp ile bölme" seçeneğine gidin
katma yazar Captainlonate, kaynak

Varsayılan olarak ReactJS, XSS'yi önlemek için HTML'den kaçar. HTML ayarlamak isterseniz, dangerouslySetInnerHTML özel özelliğini kullanmanız gerekir. Aşağıdaki kodu deneyin:

render: function() {
        var name = "Javascript";
        var query = "java"
        return (
            <div>
                <input type="checkbox" /> 
            </div>
        );
    }
3
katma
DangerouslySetInnerHTML özelliğini kullanmadan bunu yapmanın daha iyi bir yolu var mı? Teşekkürler
katma yazar Andrew Hunt, kaynak
Evet var. Bu, sorgunun 'vurgulanmasını' gerçekleştiren yeni bir React bileşeni oluşturmayı gerektirir. Daha sonra bu bileşenin içinde bu bileşeni kullanabilirsiniz. Bu yaklaşım, her şeyin 1 şeyi yapan ve gerçekten iyi yapan şeylerin küçük parçalara bölündüğü ReactJS ruhu içinde olacaktır. Bu, tek sorumluluk ilkesidir ve diğer programlama alanları için de geçerlidir.
katma yazar Yanik Ceulemans, kaynak

İstediğinizi yapmak için zaten bir NPM’de tepki verme bileşeni var:

var Highlight = require('react-highlighter');
[...]
{name}
2
katma

Bu çalışmalı:

var Component = React.createClass({
    _highlightQuery: function(name, query) {
        var regex = new RegExp("(" + query + ")", "gi");
        return ""+name.replace(regex, "$1")+"";
    },
    render: function() {
        var name = "Javascript";
        var query = "java"
        return (
            <div>
                <input type="checkbox" />{JSXTransformer.exec(this._highlightQuery(name, query))}
            </div>
        );
    }
});

Basically you're generating a react component on the fly. If you want, you can put the tag inside the render() function rather then the _highlightQuery() one.

1
katma

I would suggest you use a different approach. Create one component, say , which contains elements.

var React = require('react');
var Text = require('Text.jsx');

var TextContainer = React.createClass({
    getInitialState: function() {
        return {
            query: ''
        };
    },
    render: function() {
        var names = this.props.names.map(function (name) {
            return 
        });
        return (
            <div>
                {names}
           </div>
        );
    }
});

module.exports = TextContainer;

As you see the text container holds as state the current query. Now, the component could be something like this:

var React = require('react');

var Text = React.createClass({
    propTypes: {
        name: React.PropTypes.string.isRequired,
        query: React.PropTypes.string.isRequired
    },

    render: function() {
        var query = this.props.query;
        var regex = new RegExp("(" + query + ")", "gi");
        var name = this.props.name;
        var parts = name.split(regex);
        var result = name;

        if (parts) {
            if (parts.length === 2) {
                result =
                    {parts[0]}{query}{parts[1]};
            } else {
                if (name.search(regex) === 0) {
                    result = {query}{parts[0]}
                } else {
                    result = {query}{parts[0]}
                }
            }
        }

        return {result};
    }

});

module.exports = Text;

Bu nedenle, kök bileşen, şu anki sorgunun halidir. Durumu değiştirileceği zaman, çocukların render() yöntemini tetikler. Her çocuk yeni sorguyu yeni bir destek olarak alır ve sorguyla eşleşen bölümleri vurgulayarak metni çıkarır.

0
katma

Here is an example of a react component that uses the standard tag to highlight a text:

const Highlighted = ({text = '', highlight = ''}) => {
   if (!highlight.trim()) {
     return {text}
   }
   const regex = new RegExp(`(${_.escapeRegExp(highlight)})`, 'gi')
   const parts = text.split(regex)
   return (
     
        {parts.filter(part => part).map((part, i) => (
            regex.test(part) ? {part} : {part}
        ))}
    
   )

}

Ve burada nasıl kullanılacağı


0
katma
  const escapeRegExp = (str = '') => (
    str.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1')
  );

  const Highlight = ({ search = '', children = '' }) => {
    const patt = new RegExp(`(${escapeRegExp(search)})`, 'i');
    const parts = String(children).split(patt);

    if (search) {
      return parts.map((part, index) => (
        patt.test(part) ? {part} : part
      ));
    } else {
      return children;
    }
  };

  La La Land
0
katma