使用 React.createRef 創建 Ref 而不在 React 中使用構造函數？

Question

基本上，我在React使用constructor只有 3 個原因 -

1. 初始化state如 -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
    }
}

但是由於 Babel 的class-field支持，我不再使用它了

class App extends React.Component {
    state = { counter: 0 };
}

2. bind功能，如 -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.increment.bind(this);
    }

    increment() {

    }
}

但由於arrow功能，我不再這樣做了

class App extends React.Component {
    increment = () => {

    }
}

3. 使用createRef類的 -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
}

那么我可以在 React 中不使用constructor情況下使用React.createRef嗎？

Answer 1

您可以像state一樣將其聲明為類字段。

class App extends React.Component {
  state = { counter: 0 };
  inputRef = React.createRef();
}

Babel 會將其轉譯為類似下面第 2 階段預設中的代碼。

constructor(props) {
    super(props);

    this.state = { counter: 0 };
    this.inputRef = React.createRef();
  }

Answer 2

是的你可以。 例如：

const MyComponent = () => {
  const inputRef = React.createRef();

  return (
    <input ref={inputRef} />
  );
}

您唯一不能做的就是將ref屬性傳遞給功能組件：

render() {
  // This won't work.
  return <MyFunctionalComponent ref={this.inputRef} />
}

---

來自官方文檔的更多信息， 在這里：

但是，只要引用 DOM 元素或類組件，就可以在函數組件中使用ref屬性：

Answer 3

您可以在不使用構造函數的情況下創建帶有 ref 回調的 ref。 <input ref={(element) => { this.inputRef = element; }} /> <input ref={(element) => { this.inputRef = element; }} />是你所需要的。

Answer 4

在類組件上寫如下：

import React, { Component, createRef } from 'react';

class App extends Component {
  inputRef = createRef();

  render() {
    return (
      <div ref={this.inputRef}~~~
    );
  }
}

在功能組件上寫如下：

import React, { useRef } from 'react';

const App = () => {
  const inputRef = useRef(null);

  return (
    <div ref={inputRef}~~~
  );
};

當然，被引用的元素是可變對象，但它應該在組件的整個生命周期內持續存在。 這不是我的意見，這句話是針對ReactJS 文檔的。

Answer 5

是的。 與您對狀態所做的完全一樣（使用 Babel 的類字段支持）：

class App extends React.Component {
    inputRef = React.createRef();
}