Javascript 找不到id为的React.Component

我有一个

React.Component

和

render（）

声明如下：

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

正如类名所示，我正在尝试创建一个带有消息的简单通知。我只想通过调用

noti.show（message，duration）

来显示通知

但是，当我试图通过执行

window.noti

、

$（“#noti”）

和

document.findElementById（“noti”）

来查找

noti

时，它们都会给我

未定义的
，而
noti
会正确显示。我可以使用代码查找
noti
来查找
butt

如何找到
noti
？我是前端新手，所以请详细解释一下。
将JQuery库与Reactjs结合使用不是一个好主意。相反，您可以找到一个适当的react库来进行通知或其他任何操作

同样在React中，我们使用
ref
访问DOM节点。
大概是这样的：

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

    ...

    <Notification ref={this.noti} onMounted={() => console.log("test")}/>


构造函数（道具）{
超级（道具）；
this.noti=React.createRef（）；
}
...
console.log（“测试”）}/>

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

同样在React中，我们使用
ref
访问DOM节点。
大概是这样的：

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

    ...

    <Notification ref={this.noti} onMounted={() => console.log("test")}/>


构造函数（道具）{
超级（道具）；
this.noti=React.createRef（）；
}
...
console.log（“测试”）}/>

更多信息：
开始之前：在React.js中不建议使用id/class访问DOM节点，您需要使用Ref。阅读更多信息


在第一个呈现方法中，将id属性赋予通知组件。
在react.js中

如果您将一个属性传递给某个组件，它将成为该组件的支柱
组成部分

在为通知提供id之后，您需要在通知组件中获取并使用特定的道具

您看到您在通知的构造函数中插入了代码行
super（props）
？也就是说，从超级（上层）类中获取所有道具并在这个类中继承它们

由于id是HTML标记，您可以像以下那样使用它：


类通知扩展了React.Component{
建造师（道具）{
//继承上流社会的所有道具
超级（道具）；
此.state={
信息：“占位符”，
可见：假，
//您可以使用此.props访问所有道具
//我们使用id道具并将其分配给组件状态中的某些属性
id:this.props.id
}
}
显示（消息、持续时间）{
//代码。。
}
更改（信息）{
//代码。。
}
render（）{
const{visible，message，id}=this.state
//把那个id给div tag
回来
{message}
}
}
开始之前：在React.js中不建议使用id/class访问DOM节点，您需要使用Ref。阅读更多信息


在第一个呈现方法中，将id属性赋予通知组件。
在react.js中

如果您将一个属性传递给某个组件，它将成为该组件的支柱
组成部分

在为通知提供id之后，您需要在通知组件中获取并使用特定的道具

您看到您在通知的构造函数中插入了代码行
super（props）
？也就是说，从超级（上层）类中获取所有道具并在这个类中继承它们

由于id是HTML标记，您可以像以下那样使用它：


类通知扩展了React.Component{
建造师（道具）{
//继承上流社会的所有道具
超级（道具）；
此.state={
信息：“占位符”，
可见：假，
//您可以使用此.props访问所有道具
//我们使用id道具并将其分配给组件状态中的某些属性
id:this.props.id
}
}
显示（消息、持续时间）{
//代码。。
}
更改（信息）{
//代码。。
}
render（）{
const{visible，message，id}=this.state
//把那个id给div tag
回来
{message}
}
}
您不能像在普通HTML中声明id/class那样将id/class传递给React组件。当传递给React组件时，任何属性都将成为该组件的支柱，您必须在组件类/函数中使用该组件

render() {
      const {visible, message} = this.state
      // give your id props to div tag as id attr
      return <div id={this.props.id}>
          {message}
      </div>
    }

render（）{
const{visible，message}=this.state
//将您的id道具作为id属性提供给div标签
回来
{message}
}
您不能像在普通HTML中声明id/class那样将id/class传递给React组件。当传递给React组件时，任何属性都将成为该组件的支柱，您必须在组件类/函数中使用该组件

render() {
      const {visible, message} = this.state
      // give your id props to div tag as id attr
      return <div id={this.props.id}>
          {message}
      </div>
    }

render（）{
const{visible，message}=this.state
//将您的id道具作为id属性提供给div标签
回来
{message}
}
此答案不提供有关选择所需组件的确切答案。我提供这个答案是为了让你们能看到其他的选择（也许是更多的反应方式），并根据你们的需要加以改进


类应用程序扩展了React.Component{
状态={
不可分割：错误
};
handleClick=（）=>this.setState（{isnotivible:true}）；
render（）{
返回(
秀诺蒂
{this.state.isnotivible&&(
)}
);
}
}
类Noti扩展了React.Component{
状态={
可见：正确
};
componentDidMount（）{
setTimeout（（）=>this.setState（{visible:false}），this.props.duration）；
}
render（）{
返回this.state.visible&&{this.props.message}；
}
}
render（，document.getElementById（“根”））
此答案不能提供准确答案