Problem

Ich setze eine Reaktion refmit einer Inline-Funktionsdefinition

render = () => {
    return (
        <div className="drawer" ref={drawer => this.drawerRef = drawer}>

dann wird im componentDidMountDOM keine Referenz gesetzt

componentDidMount = () => {
    // this.drawerRef is not defined

Meines refWissens nach sollte der Rückruf während des Mount ausgeführt werden. Das Hinzufügen von console.logAnweisungen componentDidMountwird jedoch vor der Ref-Rückruffunktion aufgerufen .

Andere Codebeispiele, die ich mir zum Beispiel in dieser Diskussion über Github angesehen habe, weisen auf dieselbe Annahme hin, componentDidMountdie nach allen in refdefinierten Rückrufen aufgerufen werden sollte. Dies wird rendersogar in der Konversation angegeben

Also wird componentDidMount ausgelöst, nachdem alle Ref-Rückrufe ausgeführt wurden?

Ja.

Ich benutze reagieren 15.4.1

Etwas anderes habe ich versucht

Um zu überprüfen, ob die refFunktion aufgerufen wurde, habe ich versucht, sie für die Klasse als solche zu definieren

setDrawerRef = (drawer) => {
  this.drawerRef = drawer;
}

dann in render

<div className="drawer" ref={this.setDrawerRef}>

Die Konsolenprotokollierung in diesem Fall zeigt, dass der Rückruf tatsächlich nachher aufgerufen wird componentDidMount

Kurze Antwort:

React garantiert, dass Refs vor componentDidMountoder componentDidUpdateHooks gesetzt werden. Aber nur für Kinder, die tatsächlich gerendert wurden .

componentDidMount() {
  // can use any refs here
}

componentDidUpdate() {
  // can use any refs here
}

render() {
  // as long as those refs were rendered!
  return <div ref={/* ... */} />;
}

Beachten Sie, dass dies nicht bedeutet, dass "React immer alle Refs setzt, bevor diese Hooks ausgeführt werden".
Schauen wir uns einige Beispiele an, bei denen die Refs nicht gesetzt werden.

Refs werden nicht für Elemente gesetzt, die nicht gerendert wurden

React ruft nur ref-Rückrufe für Elemente auf, die Sie tatsächlich vom Rendern zurückgegeben haben .

Dies bedeutet, wenn Ihr Code aussieht

render() {
  if (this.state.isLoading) {
    return <h1>Loading</h1>;
  }

  return <div ref={this._setRef} />;
}

und anfangs this.state.isLoadingist true, sollten Sie nicht erwarten , this._setRefbevor aufgerufen werden componentDidMount.

Dies sollte sinnvoll sein: Wenn Ihr erstes Rendering zurückgegeben wird <h1>Loading</h1>, kann React nicht erkennen, dass es unter anderen Bedingungen etwas anderes zurückgibt, für das ein Ref angehängt werden muss. Es gibt auch nichts, auf das der Verweis gesetzt werden kann: Das <div>Element wurde nicht erstellt, da die render()Methode sagte, dass es nicht gerendert werden sollte.

In diesem Beispiel wird also nur componentDidMountausgelöst. Wennthis.state.loadingfalse Sie jedoch Änderungen an vornehmen , wird dies this._setRefzuerst angehängt und dann ausgelöstcomponentDidUpdate .

Achten Sie auf andere Komponenten

Beachten Sie, dass Kinder, die Refs an andere Komponenten weitergeben, möglicherweise etwas tun, das das Rendern verhindert (und das Problem verursacht).

Zum Beispiel:

<MyPanel>
  <div ref={this.setRef} />
</MyPanel>

würde nicht funktionieren, wenn MyPanelnicht props.childrenin seiner Ausgabe enthalten:

function MyPanel(props) {
  // ignore props.children
  return <h1>Oops, no refs for you today!</h1>;
}

Auch hier ist es kein Fehler: Für React gibt es nichts, auf das der Verweis gesetzt werden könnte, da das DOM-Element nicht erstellt wurde .

Refs werden nicht vor Lebenszyklen festgelegt, wenn sie an einen verschachtelten übergeben werden ReactDOM.render()

Ähnlich wie im vorherigen Abschnitt ist es möglich, dass diese Komponente, wenn Sie ein untergeordnetes Element mit einem Verweis an eine andere Komponente übergeben, etwas unternimmt, das das rechtzeitige Anhängen des Verweises verhindert.

Zum Beispiel wird das Kind möglicherweise nicht zurückgegeben render(), sondern es wird stattdessen ReactDOM.render()ein Lebenszyklus-Hook aufgerufen. Ein Beispiel dafür finden Sie hier . In diesem Beispiel rendern wir:

<MyModal>
  <div ref={this.setRef} />
</MyModal>

Aber MyModalführt einen ReactDOM.render()Aufruf in seinem componentDidUpdate Lebenszyklus - Methode:

componentDidUpdate() {
  ReactDOM.render(this.props.children, this.targetEl);
}

render() {
  return null;
}

Seit React 16 werden solche Renderaufrufe der obersten Ebene während eines Lebenszyklus verzögert, bis Lebenszyklen für den gesamten Baum ausgeführt wurden . Dies würde erklären, warum Sie die Refs nicht rechtzeitig sehen.

Die Lösung für dieses Problem besteht darin, Portale anstelle von verschachtelten ReactDOM.renderAufrufen zu verwenden:

render() {
  return ReactDOM.createPortal(this.props.children, this.targetEl);
}

Auf diese Weise ist unser <div>mit einem Verweis tatsächlich in der Renderausgabe enthalten.

Wenn Sie also auf dieses Problem stoßen, müssen Sie überprüfen, ob zwischen Ihrer Komponente und dem Verweis nichts vorhanden ist, was das Rendern von untergeordneten Elementen verzögern könnte.

Nicht setStatezum Speichern von Refs verwenden

Stellen Sie sicher, dass Sie setStateden Ref nicht im Ref-Rückruf speichern, da er asynchron ist und zuerst ausgeführt wird, bevor er "fertig" ist componentDidMount.

Immer noch ein Problem?

Wenn keiner der oben genannten Tipps hilft, melden Sie ein Problem in React und wir werden einen Blick darauf werfen.

Eine andere Beobachtung des Problems.

Ich habe festgestellt, dass das Problem nur im Entwicklungsmodus aufgetreten ist. Nach weiteren Untersuchungen stellte ich fest, dass das Deaktivieren react-hot-loaderin meiner Webpack-Konfiguration dieses Problem verhindert.

ich benutze

• "React-Hot-Loader": "3.1.3"
• "Webpack": "4.10.2",

Und es ist eine Elektronen-App.

Meine teilweise Webpack-Entwicklungskonfiguration

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {

  entry: [
    // REMOVED THIS -> 'react-hot-loader/patch',
    `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
    '@babel/polyfill',
    './app/index'
  ],
  ...
})

Es wurde verdächtig, als ich sah, dass die Verwendung der Inline-Funktion in render () funktionierte, die Verwendung einer gebundenen Methode jedoch abstürzte.

Funktioniert auf jeden Fall

class MyComponent {
  render () {
    return (
      <input ref={(el) => {this.inputField = el}}/>
    )
  }
}

Absturz mit React-Hot-Loader (ref ist in componentDidMount undefiniert)

class MyComponent {
  constructor (props) {
    super(props)
    this.inputRef = this.inputRef.bind(this)
  }

  inputRef (input) {
    this.inputField = input
  }

  render () {
    return (
      <input ref={this.inputRef}/>
    )
  }
}

Um ehrlich zu sein, war Hot Reload oft problematisch, um "richtig" zu werden. Da Entwickler-Tools schnell aktualisiert werden, hat jedes Projekt eine andere Konfiguration. Vielleicht könnte meine spezielle Konfiguration behoben werden. Ich werde Sie hier informieren, wenn dies der Fall ist.

Das Problem kann auch auftreten, wenn Sie versuchen, eine Referenz einer nicht gemounteten Komponente zu verwenden, z. B. eine Referenz in setinterval, und das festgelegte Intervall während der Bereitstellung der Komponente nicht löschen.

componentDidMount(){
    interval_holder = setInterval(() => {
    this.myref = "something";//accessing ref of a component
    }, 2000);
  }

immer klares Intervall wie zum Beispiel,

componentWillUnmount(){
    clearInterval(interval_holder)
}