javascript - 无法通过 id 找到 React.Component

Question

我有一个 React.Component，其中 render() 是这样声明的:

render(){
    return <div>
        <button id="butt" onClick={()=> $("#noti").change("test") }>click me</button>
        <Notification id="noti" onMounted={() => console.log("test")}/>
    </div>
}

这是我的 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 <div>
          {visible ? message : ""}
      </div>
    }
  }

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

但是，当我尝试通过执行 window.noti、$("#noti") 和 document 来查找 noti 时.findElementById("noti")，都给我undefined，而noti显示正常。我可以使用代码找到 butt 来找到 noti。

我应该如何找到noti？我是前端新手，所以请更具体地解释一下。

Answer 1

在 Reactjs 中使用 JQuery 库不是一个好主意。相反，你可以找到一个合适的 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