无法通过id找到一个React.Component

我有一个React.Component用render()这种方式声明：

render(){
    return 

         $("#noti").change("test") }>click me
         console.log("test")}/>
    
}

这是我的Notification课：

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 

          {visible ? message : ""}
      
    }
  }

就像类名所暗示的那样，我正在尝试创建一个带有消息的简单通知。我只想通过调用显示通知noti.show(message, duration)。

然而，当我试图找到noti这样做window.noti，$("#noti")并且document.findElementById("noti")，他们全都给我undefined，而noti正确显示。我可以找到butt使用代码查找noti。

我应该如何找到noti？我是前端的新手，因此请更具体地说明。

将JQuery库与Reactjs一起使用不是一个好主意。相反，您可以找到适当的react库来进行通知或其他操作。

同样在React中，我们ref用来访问DOM节点。像这样：

    constructor(props) {
        super(props);
        this.noti = React.createRef();
    }

    ...

     console.log("test")}/>

更多信息：https : //reactjs.org/docs/refs-and-the-dom.html