0
votes

Comment rendre les mots cliquables à l'intérieur du texte?

Je cherche une solution pour rendre les mots cliquables dans un texte, j'ai pensé à diviser le texte en un tableau de mots et à créer un btn pour chaque mot ... mais cette solution a de mauvaises performances ... quelqu'un en a idée? le texte est:

const paragraph = 'Emma Woodhouse, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence; and had lived nearly twenty-one years in the world with very little to distress or vex her.'

Merci !!

javascript reactjs performance text word

0 commentaires

3 Réponses :

0
votes

En supposant que vous souhaitiez mettre ces mots dans une page html, le mieux serait de placer chaque mot dans un élément et de joindre un gestionnaire de clics au .

eg,

Array.from(document.querySelectorAll('span')).forEach(span => {
 span.addEventListener('click', ...)
})

puis

<span>Emma</span> <span>Woodhouse</span>...

bien sûr il peut y avoir un autre préféré moyen de le faire en utilisant React ou un autre framework ou lib.

Il existe également des moyens plus performants pour l'implémenter, par exemple implémenter un gestionnaire de clics sur le document qui teste le type d'élément . De cette façon, vous n'avez qu'un seul gestionnaire pour tous les éléments, plutôt qu'un gestionnaire pour chaque élément.

Voir AddEventListener sur MDN

0 commentaires

1
votes

Voici une solution React:

function clickableWords(paragraph, clickCallback) {
  const words = paragraph.split(/ /g);
  return words.map(w => 
    <span onClick={() => clickCallback(w)}>{w}</span>
  );
}

Lorsque le mot est cliqué, clickCallback sera appelé avec le mot comme paramètre.

p >

0 commentaires

0
votes

Je ne pense pas qu'il existe un meilleur moyen de réaliser ce qui précède, sauf de le convertir en un tableau (par exemple, en utilisant Array.from () ), en itérant dans la phrase et en le rendant chaque caractère en tant qu'éléments cliquables individuellement.

export function App() {
  const paragraph = 'Emma Woodhouse, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence; and had lived nearly twenty-one years in the world with very little to distress or vex her.';

  const handleClick = (word) => {
    console.log(word);
    // handle the rest

  };

  const renderParagraph = () => Array.from(paragraph)
    .map((word) => <span onClick={() => handleClick(word)}>{word}</span>);

  return (
    <div className="App">
      {renderParagraph()}
    </div>
  );
}

0 commentaires