Nie można odczytać właściwości "refs" o błędzie reagowania null js

Question

Używam React js 0.14.3, Próbuję utworzyć komponent Menu boczne za pomocą reakcji, ale nie wiem, dlaczego mam "Nie można odczytać właściwość 'refs' o wartości null ", gdy używam refsów w dokumentacji reakcji: https://facebook.github.io/react/docs/more-about-refs.html Czy możesz mi pomóc?

'use strict'; 

    import React from 'react'; 
    import BaseComponent from './../../BaseComponent.react'; 
    import Menu from './SidePanelMenu'; 
    import MenuItem from './SidePanelMenuItem'; 

    class SidePanel extends BaseComponent { 
     showLeft() { 
      this.refs.leftmenu.show(); 
     } 


     render() { 
      return(
       <div> 
        <button onClick={this.showLeft}>Show Left Menu!</button> 

        <Menu ref="leftmenu" alignment="left"> 
         <MenuItem hash="first-page">First Page</MenuItem> 
         <MenuItem hash="second-page">Second Page</MenuItem> 
         <MenuItem hash="third-page">Third Page</MenuItem> 
        </Menu> 
       </div> 
      ); 
     } 
    } 

    export default SidePanel; 

Answer 1

Trzeba związać kontekst this.

Linia którym wiążą swoją obsługi onClick:

onClick={this.showLeft} 

musi być:

onClick={this.showLeft.bind(this)} 

W przeciwnym wypadku, gdy dzwonisz showLeft nie może uzyskać dostępu this.

Answer 2

To może być ten problem. spróbuj

showLeft =() => { 
 
      this.refs.leftmenu.show(); 
 
     }

lub

constructor() { 
 
    super(); 
 
    this.showLeft = this.showLeft.bind(this); 
 
}

Answer 3

Zmień to:

<button onClick={this.showLeft}>Show Left Menu!</button> 

do tego:

<button onClick={::this.showLeft}>Show Left Menu!</button>` 

Answer 4

Można także powiązać go tak, aby uniknąć błędu eslint z No .bind() or Arrow Functions in JSX Props:

class SidePanel extends BaseComponent { 
    constructor(props) { 
     super(props); 
     this.showLeft = this.showLeft.bind(this); 
     this.state = { 
      error: false, 
     }; 
    } 

    showLeft() { 
     this.refs.leftmenu.show(); 
    } 


    render() { 
     return(
      <div> 
       <button onClick={this.showLeft}>Show Left Menu!</button> 

       <Menu ref="leftmenu" alignment="left"> 
        <MenuItem hash="first-page">First Page</MenuItem> 
        <MenuItem hash="second-page">Second Page</MenuItem> 
        <MenuItem hash="third-page">Third Page</MenuItem> 
       </Menu> 
      </div> 
     ); 
    } 
} 

Answer 5

Twój kod jest napisane w ES6. W przeciwieństwie do ES5, nie ma automatycznego wiązania w ES6.

Musisz więc jawnie powiązać tę funkcję z instancją składnika za pomocą this.functionName.bind(this).

tak:

<button onClick={this.showLeft.bind(this)}>Show Left Menu!</button>

Bez wiązania, po kliknięciu na przycisku, this przycisk odnosi się do samego przycisku, a nie funkcji. Więc JavaScript próbuje znaleźć refs na elemencie przycisku, co daje ten błąd.