2017-02-26 96 views
0

我定義提示爲ReactDOM.findDOMNode用的getAttribute( 「」)返回null

<MACDTooltip ref="MACDTooltip" forChart={chartId} forDataSeries={dataSeriesId} key={`${chartId}-${dataSeriesId}`} calculator={macdCalculator} 
       onClick={logger.bind(null, { chartId, dataSeriesId }, options)} origin={[-48, 15]}/> 

componentDidMount()方法

ReactDOM.findDOMNode(this.refs.MACDTooltip).getAttribute("transform") 

回報null

ReactDOM.findDOMNode(this.refs.MACDTooltip) 

回報

<g><g class="react-stockcharts-toottip" transform="translate(-48, 15)"...</g></g> 

ReactDOM.findDOMNode(this.refs.MACDTooltip).innerHTML

回報"<g class="react-stockcharts-toottip" transform="translate(-48, 15)"></g>

如何使用ReactDOM.findDOMNode獲得應有的價值

+1

好像你有兩個嵌套的''標籤,''。所以''標籤沒有transform屬性。但內在的一個。 –

+0

我知道,這些都是由第三方庫創建的,所以沒有控制 –

回答

1

由於g標記嵌套,你想找到它的childNode並從那裏獲取屬性。例如:

class Example extends React.Component { 
 
    componentDidMount() { 
 
    console.log(
 
     ReactDOM.findDOMNode(this.refs.MACDTooltip).childNodes[0].getAttribute('transform') 
 
    ); 
 
    } 
 
    render() { 
 
    return(
 
     <MACDTooltip ref="MACDTooltip" /> 
 
    ); 
 
    } 
 
} 
 

 
// Sample MACDTooltip class for demo. 
 
class MACDTooltip extends React.Component { 
 
    render() { 
 
    return(
 
     <g> 
 
     <g transform="Attribute"><text>Tooltip</text></g> 
 
     </g> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('View'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>

+0

上面的代碼導致'Uncaught TypeError:無法讀取屬性'0'未定義的錯誤 –

+0

您使用的是哪個版本的React?你在哪裏打電話? –

+0

react版本是15.4.2,我從組件的componentDidMount()方法中調用它來定義此工具提示 –