web-dev-qa-db-fra.com

Remplacer une partie de chaîne par tag en JSX

J'essaie de remplacer des parties d'une chaîne par des balises JSX, comme ceci:

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>

Existe-t-il un moyen de résoudre ceci ou un autre moyen de remplacer des parties d'une chaîne par des balises JSX?

reactjsreact-jsx
16
Magnus Engdal

Lorsque vous transmettez un élément JSX à replace() en tant que second argument, cet élément est converti en une chaîne, car replace() attend une chaîne en tant que second argument. Ce que vous devez faire, c'est convertir votre chaîne en un tableau de chaînes et d'éléments JSX. Donc, votre variable result devrait contenir quelque chose comme ['Lorem ', <div className="spacer"></div>, ' ipsum'].

Quelque chose comme ça:

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>
    );
  }
});
18
Anders Ekdahl

Ce qui suit devrait également fonctionner (en supposant ES6). La seule nuance est que le texte est réellement placé dans un élément DIV et non précédé par celui-ci, en supposant que vous utilisiez CSS pour l'espacement réel, cela ne devrait pas poser de problème.

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

5
Andy Polhill

La réponse acceptée a deux ans. Pour ce problème, le problème # 3368 a été créé et basé sur la solution fournie par un employé de Facebook travaillant sur React, le fichier react-string-replace a été créé.

En utilisant react-string-replace, voici comment 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>
    );
  },
});
2
Matthew Barbara

J'avais la tâche la plus commune - envelopper tous les mots (anglais) par balise personnalisée . Ma solution:

class WrapWords extends React.Component {
  render() {
    const text = this.props.text;
    const isEnglishWord = /\b([-'a-z]+)\b/ig;
    const CustomWordTag = 'Word';

    const byWords = text.split(isEnglishWord);

    return (
    <div>
      {
        byWords.map(Word => {
          if (Word.match(isEnglishWord)) {
            return <CustomWordTag>{Word}</CustomWordTag>;
          }
          return Word;
        })
      }
    </div>
    );
    
  }
}

// Render it
ReactDOM.render(
  <WrapWords text="Argentina, were playing: England in the quarter-finals (the 1986 World Cup in Mexico). In the 52nd minute the Argentinian captain, Diego Maradona, scored a goal." />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

1
Londeren

Après quelques recherches, j'ai découvert que les bibliothèques existantes ne répondaient pas à mes exigences. Alors, bien sûr, j'ai écrit le mien:

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

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

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

Si vous souhaitez également pouvoir effectuer des remplacements dans les remplacements (par exemple, pour mettre en évidence les termes de recherche dans les URL), consultez le module de nœud que j'ai créé - https://github.com/marcellosachs/react-string- remplacer-récursivement

0
user1050268