Ich versuche, URLs in meiner Reaktionsanwendung anklickbar zu machen. Mein aktueller Ansatz ist wie folgt.

render() {

  function urlify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + '</a>';
    })
  }

  const headingAvailable = (
    <span className="home_post_text">{urlify(postData.heading)}</span>
  );

  return (
    <div className="home_post_sections sec2 unchange_div">{headingAvailable}</div>
  );
}

Aber ich kann das nicht richtig zum Laufen bringen.

Zum Beispiel:

Wenn mein Text so etwas ist

this is a good song https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow

Mein Text wird in so etwas konvertiert

this is a good song <a href="https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow"></a>

Wie kann ich das beheben?

3
CraZyDroiD 18 Apr. 2018 im 14:55

3 Antworten

Beste Antwort

React maskiert HTML-Tags standardmäßig in Zeichenfolgen, um XSS Sicherheitslücken zu vermeiden.

Sie müssen eine a -Komponente zurückgeben, ungefähr so:

render() {

  function urlify(text) {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.split(urlRegex)
       .map(part => {
          if(part.match(urlRegex)) {
             return <a href={part}>{part}</a>;
          }
          return part;
       });
  }

  const headingAvailable = (
    <span className="home_post_text">{urlify(postData.heading)}</span>
  );

  return (
    <div className="home_post_sections sec2 unchange_div">{headingAvailable}</div>
  );
}
class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.text = 'this is a good song https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow';
  }

  urlify(text) {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.split(urlRegex)
      .map(part => {
        if (part.match(urlRegex)) {
          return <a href={part} key={part}> {part} </a>;
        }
        return part;
      });
  }

  render() {
    return <div> {this.urlify(this.text)} </div>;
  }
}

ReactDOM.render( <
  Hello name = "World" / > ,
  document.getElementById('container')
);
<script src="https://unpkg.com/react@16.3.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>
2
felixmosh 18 Apr. 2018 im 13:27

Ändern Sie die Rückgabe der URL-Funktion in diese

return text
          .replace(urlRegex, function(url) {
             return '<a href="' + url + '">' + url +'</a>';
           })
0
marmeladze 18 Apr. 2018 im 11:58

Sie müssen Ihr link text aus Ihrem Originaltext extrahieren und zwischen Ihren <a> Tags hinzufügen.

function urlify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        var linkText = text.replace(url, '')
      return '<a href="' + url + '">' + linkText + '</a>';
    })
}
1
Stretch0 18 Apr. 2018 im 11:59