Reagieren. Erstellen Sie eine Funktion, die zurückgibt, html

Ich habe vor kurzem angefangen, mit reagieren und ich bin vor ein bisschen ein Problem.

Aktuell habe ich das folgende Stück code

<div className="col-md-4"><h4>ML</h4>
{
    game.lines.map(function (lineGroup) {
        return (
            <div className="row">
                <div className="col-md-1">
                    {lineGroup.Pay}
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.HomeInfo)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.Score)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{getLineInfo(lineGroup.AwayInfo)}</strong>
                </div>
            </div>
        )
    })
}

Dieser sitzt in meinem render() Funktion.

Allerdings habe ich das exakt gleiche Stück code, copy/Paste 5 mal mehr mit nur geringfügigen änderungen.
Ich möchte um es zu extrahieren, um eine Funktion, aber ich bin nicht sicher, wie würde ich dies tun.

Wo soll ich die Funktion ? -Innerhalb der render() Methode?

Was sollte ich zurückgeben? - Eine Zeichenfolge, die enthält den html-Code und Variablen, die in {} - Platzhalter?

Muss ich tun, nennen Sie es einfach innerhalb der html?

Ist es genau das gleiche, nur wird 5 mal wiederholt?
Nein, der Inhalt des Sekunden <stark> - tag ändern.

InformationsquelleAutor Kobek | 2017-10-26

  1. 11

    Erstellen Funktion wie diese :

    function gameLines(game) {
    return game.lines.map(function (lineGroup) {
        return (
            <div className="row">
                <div className="col-md-1">
                    {lineGroup.Pay}
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.HomeInfo)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.Score)}</strong>
                </div>
                <div className="col-md-3">
                    <strong>{this.getLineInfo(lineGroup.AwayInfo)}</strong>
                </div>
            </div>
        )
    })
}

    Verwenden, wie diese :

    <div className="col-md-4"><h4>ML</h4>
    { this.gameLines(game) }
</div>

    Vergessen Sie nicht, binden Sie die Funktionen

    constructor() {
    ...
    this.gameLines = this.gameLines.bind(this);
    this.getLineInfo = this.getLineInfo.bind(this);
}
    Arbeitete wie ein Charme, danke 🙂
    Wie ist es möglich, Rückkehr HTML-code aus einer JavaScript-Funktion? Diese Frage wurde an anderer Stelle in 2017 und es gibt keine Antwort noch. Wer dies verstehen?
    Es ist anscheinend eine neue Sprache namens JSX: reactjs.org/docs/introducing-jsx.html . Ich kann mir vorstellen, es funktioniert nur mit reagieren.

    InformationsquelleAutor Vivek Doshi

Schreibe einen Kommentar