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

Question

我有一个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 函数的正确语法是什么？

谢谢。

Answer 1

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

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