Javascript 什么构成React中ref的适当使用

有人能解释React中如何使用ref吗？我知道这是一条有点违背react DOM目的的捷径，但我不知道具体是如何或为什么。我试图确定我试图完成的事情是否代表了一种罕见的情况，在这种情况下，您应该使用ref

我想要一个自定义引导警报，我可以从这些页面中的任何一个显示，而不必使用JQuery（我已经有一个使用JQuery的）

我有一个在页面之间切换的路由器，每个页面都包含一个布局组件，其中包含一个页面组件（基于） 比如：

render（）{
return（（this.layout=layout）}>
);
}
showAlert（类型、文本、超时、超时）{
this.layout.alert.showAlert（类型、文本、超时、超时）；
}

是的，您在这里“误用了”

ref

，因为您试图构建React的预期使用方式

ref

主要用于访问实际呈现的DOM元素-可能是聚焦它、读取输入、获取维度，等等。一般来说，尽管您应该将

ref

作为“只读”功能使用，但使用它可以获取有关渲染DOM的信息，但不要将其作为绕过

render（）

或将元素注入DOM的过程的一部分

您应该做的是为警报创建一个可重用组件。使其足够灵活，可以接受任意设置，如颜色、文本、持续时间、接受/取消/清除的回调函数等。然后您可以在某处渲染它，可能如下所示：

<MyAlert
    title="foo"
    text="bar"
    duration={5}
    confirmCallback={someFunction}
    cancelCallback={anotherFunction}
/>

---

请记住，组件是渲染和与

状态

交互的一种方式，这正是您试图对警报执行的操作。有某种通知，它有内容和控件来执行某些操作，所有这些都应该存在于应用程序状态层次结构中的某个位置。在这种情况下，绝对没有理由求助于

ref

。

补充jered的答案：

如果您计划在所有页面中使用警报组件，那么您可以创建一个名为PageWithAlert（我会说仅为page）的高阶组件，其中包括每个页面的警报组件，而不是在每个页面中放置警报组件

---

你可能想看看这个

好吧，我相信你，但我讨厌在不理解我为什么要。。。你能更详细地解释一下原因吗？它基本上是将一堆冗余信息加载到内存中吗？如果我更改状态，React是否足够智能，只更新DOM的相关部分，比如警报特定的部分，这样就不会对内存造成太大的负担，而且通常会更快？此外，我可以将警报放在哪里，以及如何显示它？我还是不明白…好吧，也许我不同意。。。使用ref可以完美地工作，它不会明显地减慢速度，而且它只是“感觉”正确。我真的不明白为什么我不应该使用它，我不确定我能用道具完成同样的事情。。。如果我能把一个函数作为道具直接从布局发送到任何页面上就好了…@AndrewTorr你当然可以自由地做任何对你最合适的事情。但是误用

ref

会很容易地咬到你的屁股。React文档本身将其描述为一个“安全舱口”，可以谨慎使用。你的应用程序越复杂，使用

ref

就越有可能产生意想不到的后果。在您的情况下，您完全可以在不使用

ref

的情况下完成您想要完成的任务，而且非常容易。你能解释一下你所说的“如果我能把一个函数直接从布局发送到什么页面”是什么意思吗？@AndrewTorr