Grundsätzlich habe ich constructor in React aus nur 3 Gründen verwendet -

1. So initialisieren Sie state wie -

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

Aufgrund der Klassenfeldunterstützung von Babel verwende ich sie jedoch nicht mehr

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

2. Zu bind Funktionen wie -

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

    increment() {

    }
}

Aber aufgrund von arrow Funktionen mache ich das nicht mehr

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

    }
}

3. Um createRef wie - zu verwenden

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

Kann ich also React.createRef verwenden, ohne constructor in React zu verwenden?

14
deadcoder0904 18 Jän. 2019 im 19:18

5 Antworten

Beste Antwort

Sie können es wie state als Klassenfeld deklarieren.

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

Babel wird es in Stufe 2 in Presets der Stufe 2 umwandeln.

constructor(props) {
    super(props);

    this.state = { counter: 0 };
    this.inputRef = React.createRef();
  }
18
Ana Liza Pandac 18 Jän. 2019 im 16:48

Ja. Genau wie Sie es mit dem Staat gemacht haben (mit Babels Klassenfeldunterstützung):

class App extends React.Component {
    inputRef = React.createRef();
}
1
Mohamed Ramrami 18 Jän. 2019 im 16:31

Schreiben Sie auf Klassenkomponenten wie folgt:

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

class App extends Component {
  inputRef = createRef();

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

Schreiben Sie auf Funktionskomponenten wie folgt:

import React, { useRef } from 'react';

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

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

Das referenzierte Element ist definitiv ein veränderbares Objekt, sollte jedoch für die gesamte Lebensdauer der Komponente bestehen bleiben. Es ist nicht meine Meinung, diese Wörter sind für ReactJS-Dokumente.

2
AmerllicA 23 Feb. 2020 im 14:58

Sie können eine Referenz mit Referenzrückrufen erstellen, ohne den Konstruktor zu verwenden. <input ref={(element) => { this.inputRef = element; }} /> ist das, was Sie brauchen.

1
Avanthika 18 Jän. 2019 im 16:34

Ja, du kannst. Beispielsweise:

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

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

Das einzige, was Sie nicht tun können, ist, das Attribut ref an eine Funktionskomponente zu übergeben:

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

Weitere Informationen finden Sie in den offiziellen Dokumenten hier :

Sie können jedoch das Attribut ref in einer Funktionskomponente verwenden, solange Sie auf ein DOM-Element oder eine Klassenkomponente verweisen:

5
Chris 18 Jän. 2019 im 16:36