** 轉載文章，原文地址點選這裡**

React元件自定義屬性的定義及使用

在很多情況下，react元件中，需要使用自定義的屬性。也經常需要在預設事件（如，點選onClick）中使用自定義屬性。舉一個很簡單的例子，點選一個按鈕，並顯示這個按鈕“自定義屬性”中的string。

import React, { Component } from 'react';
export default MyButton extends Component{
    clickBtn(e){
        console.log(e.currentTarget.getAttribute('data-value'
 
));
    }
    render(){
        return(
            <button onClick={this.clickBtn.bind(this) data-value='Hello World'}>Click Me!</button>
        )
    }
}
此處，在定義和使用自定義屬性的時候，有兩點需要注意：

  


   
自定義屬性的時候，需要使用data-字首

   
使用自定義屬性的時候，通過e.currentTarget獲取到當前DOM，再通過屬性的方式獲取

  
當自定義屬性為物件時
當，需要將某個物件，此處稱為aimObj
 
，作為元件的屬性時，如果直接 data-value={aimObj} 的話，

console.log(e.currentTarget.getAttribute('data-value'));

會得到

[object]
這樣的字串。
可將物件通過JSON.stringify()字串化後傳入data-value，在使用時，再JSON.parse()下就行了
            

感謝原作者，學到了