时间戳

首页 > 解决方案 > 调用带参数的函数的reactJS渲染无法编译

javascript - 调用带参数的函数的reactJS渲染无法编译

问题描述

我有一个带有以下代码的 reactJS 应用程序来动态呈现输出：

    renderData = () => {   

    return this.state.data.map( data => (
        <div>
            <div className="oldscanFont">
                <img className="resize" src={data.galleryURL}></img><label>&nbsp;&nbsp;&nbsp;Price:&nbsp; {data.sellingStatus[0].currentPrice[0]['__value__']}</label><br />
                <label> {data.title} </label>
            </div>                    
            <div>
                <button className="btnStartScan"
                    type='button'     
                    onClick={() => { 
                    this.saveData(this.barcode, {data.title}, {data.galleryURL}, {data.sellingStatus[0].currentPrice[0]['__value__']} );
                    }}>
                    Save
                </button>                    
            </div> 
        </div>
    ) )
}

我想做的是当用户单击生成的按钮时调用函数 this.saveData 。另外，我想传递几个参数给saveData。问题是我的编辑标记了“。” 除了this.barcode之外，我希望传递的所有参数。换句话说，我在“。”上被标记了。在参数 {data.title} 中。{data.title} 是有效的，因为它出现在调用 saveData 函数的上方几行。

将这几个参数传递给 saveData 函数的正确语法是什么？

谢谢你。

标签： javascriptreactjs

解决方案

您无需在大括号内再次使用大括号。大括号表示您指的是 JSX 中的 Javascript 代码。您可以将一对大括号内的所有内容都视为纯 JS。删除 onClick 属性中的大括号，如下所示：

<button className="btnStartScan"
        type='button'     
        onClick={() => { 
            this.saveData(this.barcode, data.title, data.galleryURL, data.sellingStatus[0].currentPrice[0]['__value__'] );
        }}/>

推荐阅读