web-dev-qa-db-ja.com

Reactでコンストラクタを使用せずにReact.createRefを使用してRefを作成しますか？

基本的に、constructorでReactを使用した理由は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.createRef Reactでconstructorを使用せずに？

javascriptreactjsref
10
deadcoder0904

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();
  }
18
Ana Liza Pandac

はい、できます。例えば：

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

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

あなたができない唯一のことは、ref属性を機能コンポーネントに渡すことです：

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

公式ドキュメントの詳細情報 こちら ：

ただし、DOM要素またはクラスコンポーネントを参照する限り、関数コンポーネント内でref属性を使用できます。

5
Chris

クラスコンポーネント上に次のように書きます：

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 docs のためのものです。

2
AmerllicA

はい。状態で行ったとおり（Babelのクラスフィールドサポートを使用）：

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

コンストラクタを使用せずに、refコールバックでrefを作成できます。 <input ref={(element) => { this.inputRef = element; }} />が必要です。

1
Avanthika