我最近开始与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中调用它吗?
创建这样的功能:
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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句