web-dev-qa-db-ja.com

反応する。 htmlを返す関数を作成する

私は最近、reactの使用を開始しましたが、ちょっとした問題に直面しています。

現在、私は次のコードを持っています

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

これは私のrender()関数にあります。

ただし、これとまったく同じコードをわずかな変更を加えて5回コピー/貼り付けています。関数に抽出したいのですが、どうすればいいのかわかりません。

関数はどこに配置すればよいですか？ -render（）メソッドの内部？

それから何を返すべきですか？ -HTMLと変数を{}プレースホルダーに含む文字列？

単にhtml内で呼び出しますか？

javascripthtmlfunctionreactjsreturn
6
Kobek

このような関数を作成します：

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

次のように使用します。

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

関数をバインドすることを忘れないでください

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