Không thể đọc thuộc tính 'refs' của lỗi phản ứng null phản ứng js

Question

Tôi đang sử dụng React js 0.14.3, tôi đang cố gắng tạo thành phần Side Menu bằng phản ứng nhưng tôi không biết tại sao tôi có "Không đọc được property 'refs' của null "khi tôi sử dụng refs như trong tài liệu phản hồi: https://facebook.github.io/react/docs/more-about-refs.html Bạn có thể giúp tôi không?

'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

Bạn cần phải ràng buộc bối cảnh this.

Dòng nơi bạn đang ràng buộc handler onClick của bạn:

onClick={this.showLeft} 

Nhu cầu là:

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

Nếu không khi bạn đang gọi điện thoại showLeft nó không thể truy cập this.

Answer 2

Có thể là sự cố này. thử

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

hoặc

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

Answer 3

Thay đổi này:

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

Để này:

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

Answer 4

Bạn cũng có thể liên kết nó như thế này để tránh lỗi eslint của 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

Mã của bạn được viết bằng ES6. Không giống như ES5, không có ràng buộc tự động trong ES6.

Vì vậy, bạn phải ràng buộc rõ ràng hàm này với cá thể thành phần bằng cách sử dụng this.functionName.bind(this).

Giống như vậy:

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

Nếu không có ràng buộc, khi bạn nhấp vào nút, các this vào nút đề cập đến nút riêng của mình và không phải là chức năng. Vì vậy, JavaScript cố gắng tìm refs trên phần tử nút, cung cấp cho bạn lỗi đó.