2016-07-14 149 views
2

元素屬性我有這個div:陣營:得到法

<div className="item #{ @test() }" data-value="1"> 

和whant獲得方法數據屬性訪問:

test: -> 
console.log ($(this).data("value")) 

,但我得到這個代替元素:

Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…} 
+0

在你的代碼中你有一個錯誤。當你在className屬性中調用某個函數時,對象'this'將引用您的React組件,但不引發呈現的元素。 – steppefox

+0

@steppefox確實如此,但真正的錯誤在於,當您使用React時,您無需訪問渲染元素的屬性。 –

回答

2

不要將您的DOM節點視爲真相的來源。

React中的DOM節點的形狀應始終爲派生的從通過道具傳遞到組件中的數據或作爲其內部狀態的一部分進行維護。

假設渲染方法呈現該標籤看起來像這樣的組件:

return (
    <div className={`item ${this.test()}`} data-value="1"></div> 
); 

在這種情況下,我們硬編碼數據值屬性爲"1"。這不是特別有用,我們更可能使用組件的道具中的值。現在

const { value = 1 } = props; 

return (
    <div className={`item ${this.test()}`} data-value={value}></div> 
); 

我們可以編程方式使用此值,而不是試圖鉤到DOM節點把它找回來了建設類名。

const { value = 1 } = props; 
return (
    <div className={`item ${this.test(value)}` data-value={value}></div> 
);