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

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

1 个答案: