Question

In Facebook's documentation on refs:

请勿过度使用Refs，您的第一个倾向可能是使用引用来“ 事情发生”。如果是这种情况，请花一点时间更审慎地考虑state在组件层次结构。通常，很明显， “拥有”该状态在层次结构中处于较高级别。见 Lifting State Up指南中的示例。

在我当前的React应用程序中，我有几个div节点要在条件上进行修改。这些div节点是在render()链接的returns的内部创建的。我当然不能使用Document.queryselector（）。我什么都别想了。

文档还试图用文章“提升状态”来解释，但我不明白。有人可以阐明这一点吗？（{ELI5，如果可以。）

Answer 1

提升状态意味着子组件引发事件，而不是自己处理状态更改。在React docs中，它们从每个组件管理自己的状态（handleChange）开始。再往下，他们通过添加onTemperatureChange道具来提升状态。现在，子代将状态更改委托给最接近的公共父代Calculator。 Calculator更改状态并通过道具将新值向下推。

仅当需要在DOM元素上调用特定函数时才使用refs，focus()是迄今为止在我的应用程序中最常见的用法。这个SO answer有一个很好的例子，由于链接不正确而在此处复制：

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

还请务必阅读answer below the linked answer，autoFocus是安装时聚焦的正确答案，但是在某些情况下，您肯定希望动态聚焦元素。

为什么我们不应该使用ref？

1 个答案: