React 与 dom 互动
React interract with dom
我如何 'talk' 与 dom 元素一起反应?
例如 - 我需要将一些动作与一些 js 库绑定
两种方法 returns 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)
returns html 虽然来自渲染本身
我如何与他们合作?
正确的生命周期方法是什么?
您使用 "refs":
<div ref={e => {this.div = el}} ...>...</div>
一旦您的组件渲染完成,使用上面的方法,它的 div
属性(您可以使用任何您想要的名称)将引用渲染的 div
元素。
这是一个主要从上面的 link 复制的示例,它在呈现时聚焦文本输入:
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>
我如何 'talk' 与 dom 元素一起反应?
例如 - 我需要将一些动作与一些 js 库绑定
两种方法 returns 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)
returns html 虽然来自渲染本身
我如何与他们合作? 正确的生命周期方法是什么?
您使用 "refs":
<div ref={e => {this.div = el}} ...>...</div>
一旦您的组件渲染完成,使用上面的方法,它的 div
属性(您可以使用任何您想要的名称)将引用渲染的 div
元素。
这是一个主要从上面的 link 复制的示例,它在呈现时聚焦文本输入:
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>