小编典典

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

reactjs

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


阅读 276

收藏
2020-07-22

共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);
}
2020-07-22