做出反应。创建一个返回 html 的函数

Question

我最近开始使用 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 中调用它吗？

Answer 1

像这样创建函数：

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