我最近开始与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()职责。
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); }