प्रतिक्रिया से शैलियों तक कैसे पहुंचे?

Question

मैं प्रतिक्रिया में एक div की चौड़ाई और ऊंचाई शैलियों तक पहुंचने का प्रयास कर रहा हूं लेकिन मैं एक समस्या में भाग रहा हूं। यह मैं अब तक क्या मिला है:

componentDidMount() { 
    console.log(this.refs.container.style);  
} 


render() { 
    return (
     <div ref={"container"} className={"container"}></div> //set reff 
    ); 
} 

यह काम करता है लेकिन उत्पादन है कि मैं पाने के एक CSSStyleDeclaration वस्तु है और सभी संपत्ति में मैं यह कर सकते हैं कि वस्तु के लिए सभी CSS चयनकर्ताओं पर वे उनमें से कोई भी सेट कर रहे हैं। वे सभी एक खाली स्ट्रिंग पर सेट हैं।

यह CSSStyleDecleration के उत्पादन में है: http://pastebin.com/wXRPxz5p

वास्तविक शैलियों (घटना inherrited वाले) को देखने के लिए हो रही है पर कोई मदद बहुत सराहना की जाएगी!

धन्यवाद!

Answer 1

इस

console.log(ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14.1 

console.log(React.findDOMNode(this.refs.container).style);//React v <= 0.13.3 

संपादित कर सकता हूं:

विशिष्ट शैली मूल्य

console.log(window.getComputedStyle(React.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes; 

Answer 2

हो रही आप से ReactDOM.findDOMNode विधि और काम का उपयोग करना चाहिए के लिए। यहां वह कोड है जो आपको चाहिए।

var Hello = React.createClass({ 

componentDidMount: function() { 
    var elem = ReactDOM.findDOMNode(this.refs.container); 
    console.log(elem.offsetWidth, elem.offsetHeight);  
}, 

render: function() { 
    return (
     <div ref={"container"} className={"container"}> 
     Hello world 
     </div> 
    ); 
} 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

jsFiddle

Answer 3

आप पहले से ही शैली मिलता है, कारण है कि CSSStyleDeclaration वस्तु के रंगमंच की सामग्री इतना रिक्त स्ट्रिंग मान होना यह भीतरी शैली के लिए लिंक है।

देखें क्या होगा अगर तुम नीचे की तरह परिवर्तन करना:

<div ref={"container"} className={"container"} style={{ width: 100 }}></div>