Wie wertet einen string mit Variablen in einen reagieren Komponente?

Ich habe einen string mit einer variable innerhalb: 

var template = '<div>Hello {username}</div>';

Wird der Benutzername durch den Staat, wie zum Parsen dieses Strings und schalten Sie es in einen reagieren Komponente?

  • Gibt es einen Grund, Sie sind nicht nur mit jsx statt einem string? var template = <div>Hello {username}</div> funktioniert direkt aus der box ohne etwas Phantasie
  • Ich habe den HTML-Code in separaten Dateien, Arbeit, Politik, Designer sind nicht erlaubt zu ändern, js-Dateien, nur HTML-Dateien
  • die Frage wurde schon gestellt und beantwortet
  • Ich bin mit babel.Transformation('<div>Hallo</div>').code, bekomme aber eine Fehlermeldung "Unexpected token', auch "importieren von babel von 'babel-core';" erzeugt die Fehlermeldung "TypeError: isNaN keine Funktion", wie es aussieht, spielt nicht schön mit meiner meteor + redux +app reagieren
InformationsquelleAutor chulian | 2016-10-24
  1. 7

    Verwenden RegExp zu identifizieren, die alle {} setzt. Dann ersetzen Sie den Wert mit der state-Wert, und aktualisieren Sie die Zeichenfolge. Schließlich verwenden dangerouslysetinnerhtml
    einfügen der HTML-string in reagieren Knoten. Siehe das Beispiel.

    Hoffe, das hilft!

    JS:

    class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      username: 'Pranesh',
      userId: 124,
    }
  }
  render(){
    var template = '<div>Hello {username}. Your user id is {userId}.</div>';
    var r = template.match(/\{[\w]+\}/g);
    r && r.forEach((state) => {
      var regex = new RegExp(state, 'g')
      var stateItem = state.split(/{|}/g)[1]
      template  = template.replace(regex, this.state[stateItem])
    })
    return <div dangerouslySetInnerHTML={{__html: template}}/> 
    
  }
}

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

    HTML:

    <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="app"></div>

    InformationsquelleAutor Pranesh Ravi
  2. 0

    Ich bin mir nicht sicher, was Sie versuchen zu tun, aber Sie tun können, var template = (<div>{this.state.username}</div>)

    • das problem ist, dass der string kommt aus einer html-Datei mit fs.Lesen
    InformationsquelleAutor Lionel Dcosta
Schreibe einen Kommentar