反应。创建一个返回html的函数 [英] React. Creating a function that returns html

问题描述

目前我有以下一段代码

 < div className =col-md-4>< h4> ML< / h4> 
 {
 game.lines.map（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> 
）
}）
} 
  

这位于我的渲染器（）函数。

然而，我有这个完全相同的作品只需稍作修改即可复制/粘贴5次以上。
我希望将它提取到一个函数中，但我不确定该如何执行此操作。

我应该在哪里放置函数？ - 里面的render（）方法？

我应该从中返回什么？ - 在{}占位符中包含html和变量的字符串？

我是否简单地在html中调用它？

  function gameLines（game）{$ b 
创建类似这样的函数： $ b 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）}< ; /强> 
< / div> 
< / div> 
）
））
} 
  

使用方法如下：

 < div className =col-md-4>< h4> ML< / h4> 
 {this.gameLines（游戏）} 
< / div> 
  

不要忘记绑定函数

 构造函数（）{
 ... 
 this.gameLines = this.gameLines.bind（this）; 
 this.getLineInfo = this.getLineInfo.bind（this）; 
} 
  

I recently started working with react and I am facing a bit of an issue.

Currently I have the following piece of code

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

This sits in my render() function.

However I have this exact same piece of code copy/pasted 5 more times with only minor changes. I wish to extract it to a function, but I am not sure how would I do this.

Where should I place the function ? -Inside the render() method?

What should I return from it? - A string that contains the html and variables in {} placeholders?

Do I simply call it within the html?

解决方案

Create function like this :

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

Use like this :

<div className="col-md-4"><h4>ML</h4>
    { this.gameLines(game) }
</div>

Dont forget to bind the functions

constructor() {
    ...
    this.gameLines = this.gameLines.bind(this);
    this.getLineInfo = this.getLineInfo.bind(this);
}

这篇关于反应。创建一个返回html的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！