Remplacer une partie de la chaîne avec un tag en JSX

Je suis en train de remplacer une partie de la chaîne avec JSX balises, comme suit:

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

Mais étant donné que this.props.text est Lorem : ipsum, il en résulte

<div>
    Lorem [object Object] ipsum.
</div>

Est-il un moyen de résoudre ce ou un autre moyen de remplacer certaines parties d'une chaîne de JSX tags?

OriginalL'auteur Magnus Engdal | 2015-05-27

  1. 17

    Lorsque vous passez une JSX élément de replace() comme deuxième argument, cet élément est converti en chaîne, car replace() attend une chaîne comme deuxième argument. Ce que vous devez faire est de convertir votre chaîne à un tableau de chaînes de caractères et JSX éléments. Si votre result variable doit contenir quelque chose comme ['Lorem ', <div className="spacer"></div>, ' ipsum'].

    Quelque chose comme ceci:

    function flatMap(array, fn) {
  var result = [];
  for (var i = 0; i < array.length; i++) {
    var mapping = fn(array[i]);
    result = result.concat(mapping);
  }
  return result;
}

var Comp = React.createClass({
  render: function () {
    var result = 'Lorem : ipsum';
    result = flatMap(result.split(':'), function (part) {
      return [part, <div>spacer</div>];
    });
    //Remove the last spacer
    result.pop();
    return (
      <div>        
        {result}
      </div>
    );
  }
});
    Fantastique, merci!
    Anders, c'est génial! Vous savez comment on faisait le tour de faire de même, mais pour l'avoir (et de rendu) HTML statique à l'intérieur de la chaîne? Si Lorem est wrappend dans un DIV, rendu { résultat } à l'intérieur de dangerouslySetInnerHTML donne toutes sortes de (attendue) de la difficulté.
    La accepté de réponse est de deux ans. J'ai rencontré ce problème aujourd'hui et sur la base des recherches que j'ai fait aujourd'hui, je crois que ma réponse est la meilleure solution pour ce problème.

    OriginalL'auteur Anders Ekdahl

  2. 5

    Devraient également travailler (ce qui suppose que ES6), La seule nuance est que le texte est en fait le tout enveloppé dans un élément DIV et non précédé par elle, en supposant que vous allez utiliser les CSS pour l'espacement cela ne devrait pas être un problème.

    const result = this.props.text.split(':').map(t => {
    return <div className='textItem'>{t}</div>;
    });

    exactement ce que je cherchais, merci 🙂
    Le résultat sera absent de la entretoise div, puisque vous ne remplacez pas le côlon avec quoi que ce soit.

    OriginalL'auteur Andy Polhill

  3. 2

    La accepté de réponse est de deux ans. Pour résoudre ce problème problème #3368 a été créé et basé sur la solution fournie par Facebook employé travaillant sur Réagir, réagir-chaîne-remplacer a été créé.

    À l'aide de réagir-chaîne de remplacement, voici comment vous pouvez résoudre votre problème

    const reactStringReplace = require('react-string-replace');

const HighlightNumbers = React.createClass({
  render() {
    const content = 'Hey my number is 555:555:5555.';
    return (
      <span>
        {reactStringReplace(content, ':', (match, i) => (
          <div className="spacer"></div>
        ))}
      </span>
    );
  },
});
    Upvoted. L'exemple pourrait être améliorée si le "contenu" serait en fait contenir un colon. Ou de modifier le matcher dans le reactStringReplace ligne pour correspondre à quelque chose d'autre dans le contenu.
    Mise à jour de la réponse. Merci de souligner ce point

    OriginalL'auteur Matthew Barbara

  4. 0

    Si vous souhaitez également être en mesure de faire des remplacements au sein de remplacement (par exemple, pour mettre en évidence les termes de recherche dans les urls), découvrez ce nœud module que j'ai créé - https://github.com/marcellosachs/react-string-replace-recursively

    OriginalL'auteur user1050268

  5. 0

    Après quelques recherches, j'ai trouvé que les bibliothèques existantes ne correspondent pas à mes exigences. Alors, bien sûr, j'ai écrit mon propre:

    https://github.com/EfogDev/react-process-string

    Il est très facile à utiliser. Votre exemple de cas:

    let result = processString({
    regex: /:/gim,
    fn: () => <div className="spacer"></div>
})(this.props.test);

    OriginalL'auteur Efog