反应 创建一个返回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);
}