带有getAttribute(“”)的ReactDOM.findDOMNode返回null

时间:2017-02-26 09:48:05

标签: javascript reactjs jsx react-dom

我将工具提示定义为

<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 个答案:

答案 0 :(得分:1)

由于g标记是嵌套的,您希望找到它的childNode并从中获取属性。例如:

&#13;
&#13;
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'));
&#13;
<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>
&#13;
&#13;
&#13;