ReactDOM.findDOMNode 使用 getAttribute("") returns 空
ReactDOM.findDOMNode with getAttribute("") returns 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")
return null
ReactDOM.findDOMNode(this.refs.MACDTooltip)
return秒
<g><g class="react-stockcharts-toottip" transform="translate(-48, 15)"...</g></g>
和
ReactDOM.findDOMNode(this.refs.MACDTooltip).innerHTML
return "<g class="react-stockcharts-toottip" transform="translate(-48, 15)"></g>
如何使用 ReactDOM.findDOMNode
来获取正确的值
由于 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>
我将工具提示定义为
<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")
return null
ReactDOM.findDOMNode(this.refs.MACDTooltip)
return秒
<g><g class="react-stockcharts-toottip" transform="translate(-48, 15)"...</g></g>
和
ReactDOM.findDOMNode(this.refs.MACDTooltip).innerHTML
return "<g class="react-stockcharts-toottip" transform="translate(-48, 15)"></g>
如何使用 ReactDOM.findDOMNode
来获取正确的值
由于 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>