Question

有人可以解释React中如何使用ref？我理解这是一种快捷方式，它会破坏反应DOM的目的，但我不知道究竟是怎么回事。我正在尝试确定我想要完成的事情是否是您应该使用ref

的极少数情况之一

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

我有一个在页面之间切换的路由器，每个页面都包含一个内部有Page组件的Layout组件（基于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);
}

我可以想到三个解决方案：

使用ref，因为我只是部分理解在某种程度上违背了反应组件的目的，但我不确定究竟是多少......
使用ref，但在较小程度上，通过在页面组件之前将警报组件放在每个布局中（因此不需要参考）。
在每个页面上创建一个组件和一个函数，使用页面的状态来控制警报，因此它基本上与为每个页面创建唯一警报相同，这也违背了组件的用途。 ..

大多数人在解释使用ref的内容时给出的例子涉及焦点（） - 这是相似的吗？直观地感觉我应该使用ref，但我也知道理论上你不应该，但我想理解为什么，因为有例外，而且我知道这可能很重要。

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

现有的示例和库似乎都使用方法3（或者它们更简单，并且不是非常类似）。

可以在这里使用吗？这是错的吗？为什么？我是否想过这个？

Answer 1

是的，你是＆＃34;滥用＆＃34; ref这里是因为您正试图围绕如何使用React进行构建。

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

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

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

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

Answer 2

补充一下jered的回答：

如果您打算在所有页面中使用警报组件，那么您可以创建一个名为PageWithAlert（我想说的只是Page）的高阶组件，其中包含每个页面的警报组件，而不是在每个页面中放置一个警报组件。

您可能需要查看此https://facebook.github.io/react/docs/higher-order-components.html

什么构成在React中适当使用ref

2 个答案: