我有一个声明如下的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()来显示通知。
但是,当我试图通过执行Notificationnoti.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/

10-09 23:17