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

科贝克

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

Vivek Doshi

创建这样的功能:

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

反应:点击创建一个新的html元素

反应typerror,不是一个函数

反应:.map不是一个函数

await 函数返回一个promise,即使条件为假也返回true | 反应功能组件

每当我尝试创建一个新的反应函数时,Undefined 都不是一个函数

如何从另一个文件中的反应 axios 函数返回 const?

在同一个反应函数中创建多个数据框,并分别输出

如何声明一个泛型函数,该函数返回一个具有相同参数但其参数返回类型不同的函数(反应钩子)

在一个简单的函数中反应 js 错误,该函数接受一个数组并返回一个随机值

如何获得一个反应返回元素的长度?

反应-如何返回上一个分页?

如何创建一个JSON数组反应的组分?

反应:在 <li> 中创建一个 href

创建一个可重用的 antd 表如何反应

反应this.setState不是一个函数

反应从 ReactDOM.render 调用一个函数

从另一个类调用函数(反应)

反应:_this2.setState不是一个函数

反应错误更改 this.setState 不是一个函数

反应:AppStore侦听器必须是一个函数

反应-TypeError:jokes.map不是一个函数

反应-TypeError:_this.setState不是一个函数

反应:当元素模糊时触发一个函数

反应:执行一个函数的次数被称为

反应更新列表不是一个函数

反应:this.props.posts.map不是一个函数

反应:this.setState 不是一个函数

data.map 不是一个函数反应

反应TypeError:lists.map不是一个函数