1
votes

Placer la balise HTML dans une chaîne

Cela semble facile, mais pour une raison quelconque, je ne peux pas le faire.

Dans React, j'ai un objet:

test.paragraphs.map(item => <p>item</p>)

Je mappe les paragraphes dans l'ordre pour obtenir quelques paragraphes rendus, comme ça.

const test = {
  paragraphs: [
    'text of paragraph A text <a>link</a> text', //<a> tag will be printed just as a string
    'text of paragraph B text text',
  ]
}

Tout fonctionne très bien. Mais que faire si je veux mettre une balise de lien dans le premier paragraphe. Comment puis-je intégrer une balise html à l'intérieur de la première chaîne du tableau?

javascript reactjs

7 commentaires

La touche < de votre clavier est-elle cassée ou quelque chose? (Vous devez fournir un exemple reproductible minimal et un énoncé clair du problème)

Votre lien a-t-il un format spécifique?

@kemicofa non, c'est typique

Partagez le code. Comment rendez-vous ces paragraphes? Je ne vois aucun code html dans ces paragraphes

J'ai mis à jour ma question les gars

La balise sera-t-elle toujours un , ou pouvez-vous obtenir autre chose (comme un br )?

Découvrez celui-ci question et réponse similaires fournies

3 Réponses :

0
votes

Voici un exemple de conversion de votre chaîne en HTML dans une application reactjs

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<a href={to} target="_blank" {...rest}>{children}</a>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

0 commentaires

-1
votes

Utilisez String # replace a >. Une expression régulière de base pour trouver des URL, puis utiliser un rappel pour envelopper le lien dans une donnée

const test = {
  paragraphs: [
    'text of paragraph A text http://google.com',
    'text of paragraph B text text',
    'text of paragraph http://www.yahoo.com B text text',
    'text http://google.com of paragraph http://www.yahoo.com B text text',
  ]
};

const res = test.paragraphs.map(p=>{
   return `<p>${p.replace(/http(s)?\:\/\/(www.)?[a-zA-Z]+\.[a-z]+/g, (link)=>`<a href="${link}">${link}</a>`)}</p>`;
   
});

document.body.innerHTML = res.join("");

0 commentaires

0
votes

React ne transforme pas automatiquement votre chaîne en élément JSX, il est rendu tel quel.

React vous permet donc d'injecter votre code html dans un composant HTML avec des props dangerouslySetInnerHTML. À vos risques et périls :)

Consultez la documentation ici a >

render() {
    return (
        <div dangerouslySetInnerHTML={{ __html: '<p>This is dangerous</p>' }} />
    );
}

0 commentaires