如何通过 React 与 dom 元素“对话”?
例如 - 我需要将一些操作与一些 js 库绑定(bind)
由于某种原因,两种方法都会返回undefined
componentDidMount() {
const element1 = document.querySelector('.home-container')
const element2 = ReactDOM.findDOMNode(this);
// returns undefined, undefined
console.log(element1.length, element2.length);
}
render() {
return (
<div className="home-container">
...
</div>
)
}
但是 console.log(element1)
从渲染本身返回 html
我如何与他们合作? 正确的生命周期方法是什么?
最佳答案
您使用 "refs" :
<div ref={e => {this.div = el}} ...>...</div>
一旦您的组件按照上述内容进行渲染,其 div
属性(您可以使用任何您想要的名称)将引用已渲染的 div
元素。
这是一个主要从上面的链接复制的示例,该示例在渲染时聚焦文本输入:
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<input type="text"
ref={(input) => { this.textInput = input; }} />
);
}
}
ReactDOM.render(
<AutoFocusTextInput />,
document.getElementById("root")
);
<div id="root"></div>
<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>
关于javascript - React 与 dom 交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45935629/