我有一个声明如下的React.Component
:
render(){
return <div>
<button id="butt" onClick={()=> $("#noti").change("test") }>click me</button>
<Notification id="noti" onMounted={() => console.log("test")}/>
</div>
}
这是我的课:
class Notification extends React.Component {
constructor(props) {
super(props)
this.state = {
message: "place holder",
visible: false
}
}
show(message, duration){
console.log("show")
this.setState({visible: true, message})
setTimeout(() => {
this.setState({visible: false})
}, duration)
}
change(message){
this.setState({message})
}
render() {
const {visible, message} = this.state
return <div>
{visible ? message : ""}
</div>
}
}
正如类名所示,我试图创建一个简单的带有消息的通知。我只想通过调用
render()
来显示通知。但是,当我试图通过执行
Notification
、noti.show(message, duration)
和noti
来查找window.noti
时,它们都会给我$("#noti")
,而document.findElementById("noti")
则显示正确。我可以使用代码找到undefined
。如何找到
noti
?我是新来的前端,所以请更具体一点解释。 最佳答案
将JQuery库与Reactjs一起使用不是一个好主意。相反,您可以找到一个适当的react库来进行通知或其他操作。
同样在React中,我们使用ref
来访问DOM节点。
像这样的:
constructor(props) {
super(props);
this.noti = React.createRef();
}
...
<Notification ref={this.noti} onMounted={() => console.log("test")}/>
更多信息:https://reactjs.org/docs/refs-and-the-dom.html
关于javascript - 无法通过id找到一个React.Component,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58851837/