javascript - 什么构成了 React 中 ref 的适当使用

Question

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

我想要一个可以从这些页面中的任何一个显示的自定义 Bootstrap 警报，而无需使用 JQuery(我已经有一个使用 JQuery 的人)

我有一个在页面之间切换的路由器，每个页面都包含一个 Layout 组件，里面有一个 Page 组件(基于 this ) 喜欢:

render() {
  return (<Layout ref={layout => (this.layout = layout)}>
    <WhateverPage
      session={this.session}
      otherExampleProp={"something"}
      showAlert={this.showAlert}/>
  </Layout>);
}

showAlert(type, text, hasTimeout, timeoutMs) {
  this.layout.alert.showAlert(type, text, hasTimeout, timeoutMs);
}

我可以想到三种解决方案:

1. 使用 ref，据我所知，它在某种程度上违背了 React 组件的目的，但我不确定究竟如何......

2. 使用 ref，但在较小程度上，通过将警报组件放置在每个布局中的页面组件之前(因此不需要 ref to )。

3. 在每个页面上创建一个组件和一个函数，使用页面的状态来控制警报，因此这与为每个页面创建一个唯一的警报基本相同，这也违背了组件的目的。 ..

大多数人在解释 ref 的用途时给出的示例涉及 focus() - 这是否相似？直觉上我应该使用 ref，但我也知道理论上你不应该使用，但我想了解为什么，因为有异常(exception)，据我所知这可能很重要。

同样，我想创建一个确认组件来替换原生 JS confirm()(因为它可能很快就会被弃用)，这种方法(使用 ref)也比为每个页面创建一个组件更容易，因为我可以将任何函数作为参数传递给确认组件，以便它在按下 OK 按钮时执行(还让我可以选择包括图标、标题、自定义按钮等)。

现有的示例和库似乎都使用方法 3(或者它们更简单，而且并非完全相似)。

这里可以使用 ref 吗？这是错的吗？为什么？我是不是想多了？

Answer 1

是的，您在这里“滥用”了 ref，因为您正试图围绕 React 的预期使用方式进行构建。

ref 主要用于访问实际呈现的 DOM 元素 - 可能是聚焦它、读取输入、获取尺寸等等。 一般来说虽然您应该将 ref 作为“只读”功能 - 使用它来获取有关呈现的 DOM 的信息，但不要将它用作过程的一部分绕过 render() 或将元素注入(inject) DOM。

您应该做的是为您的警报创建一个可重用的组件。让它足够灵活，它可以接受任意设置，如颜色、文本、持续时间、接受/取消/清除的回调函数等。然后你可以在某个地方渲染它，可能像这样:

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

请记住，组件是一种呈现 state 并与之交互的方式，而这正是您尝试对 Alert 执行的操作。有某种通知，它有执行某些操作的内容和控件，所有这些都应该存在于您的应用程序状态层次结构中的某个位置。在这种情况下，绝对没有理由求助于 ref。