Создать Ref с помощью React.createRef без использования конструктора в React?

Question

В основном я использовал constructor в React только по 3 причинам -

1. Для инициализации state like -

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

но из-за поддержки поля класса Бабеля я больше не использую его

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.createRef без использования constructor в React?

Answer 1

Да, вы можете. Например:

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

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

Единственное, что вы не можете сделать, - это передать атрибут ref функциональному компоненту:

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

---

Больше информации от официальных документов, здесь :

Однако вы можете использовать атрибут ref внутри компонента функции, если вы ссылаетесь на элемент DOM или компонент класса:

Answer 2

Вы можете объявить его как поле класса так же, как 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 3

вы можете создать ссылку с обратными вызовами ref без использования конструктора. <input ref={(element) => { this.inputRef = element; }} /> - это то, что вам нужно.

Answer 4

Да. Точно так же, как вы сделали с состоянием (с поддержкой полей класса Бабеля):

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