javascript - React 组件中的一次性操作

Question

我对 React 组件中的“一次性操作”有疑问。想象一下，例如我想将某个元素滚动到某个位置，或者重置内部 react 状态。

到目前为止，我一直通过使用 bool 标志(例如 doAction: true)和更新操作(例如 setDoActionBackToFalse)的组合来做到这一点，但这似乎太复杂了。有人对此有什么好的解决方案吗？

注意:该操作实际上可以在组件的生命周期内发生多次，但每次都必须专门触发并且只发生一次(而不是在每次重新渲染时都发生)。例如。滚动到滚动 Pane 中的每个新添加的项目。

我创建了一个 fiddle 来使问题更加明显: https://jsfiddle.net/martinkadlec/et74rkLk/1/这使用 bool 标志方法。

Answer 1

我问这个问题已经有一段时间了，从那时起我发现只要“一次性操作”实际上并没有重新渲染组件，而是只是修改了一些浏览器状态(例如焦点，滚动位置，等)人们通常倾向于通过拥有一个类方法并使用 refs 从父组件调用它来解决这个问题。

以焦点示例为例:

class Input extends React.Component {
  inputElRef = React.createRef();
  focus = () => this.inputElRef.current.focus();
  render() {
    return (
      <input ref={this.inputElRef} />
    );
  }
}

class Parent extends React.Component {
  inputRef = React.createRef();
  render() {
    return (
      <div>
        <button onClick={() => this.inputRef.current.focus()}>Focus input</button>
        <Input ref={this.inputRef} />
      </div>
     );
  }
}