web-dev-qa-db-fra.com

Réagir. Création d'une fonction qui renvoie du HTML

J'ai récemment commencé à travailler avec React et je fais face à un petit problème.

Actuellement, j'ai le code suivant

<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>
        )
    })
}

Cela se trouve dans ma fonction render().

Cependant, j'ai exactement le même morceau de code copié/collé 5 fois de plus avec seulement des changements mineurs. Je souhaite l'extraire dans une fonction, mais je ne sais pas comment procéder.

Où dois-je placer la fonction? -À l'intérieur de la méthode render ()?

Que dois-je en retirer? - Une chaîne qui contient le html et les variables dans les espaces réservés {}?

Dois-je simplement l'appeler dans le html?

javascripthtmlfunctionreactjsreturn
6
Kobek

Créez une fonction comme celle-ci:

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>
        )
    })
}

Utilisez comme ceci:

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

N'oubliez pas de lier les fonctions

constructor() {
    ...
    this.gameLines = this.gameLines.bind(this);
    this.getLineInfo = this.getLineInfo.bind(this);
}
12
Vivek Doshi