Làm thế nào để sửa lỗi 'FB' không được định nghĩa không có undef trên dự án tạo phản ứng-ứng dụng?

Question

Tôi đã tạo dự án bằng liên kết này làm tệp bắt đầu của tôi.

https://github.com/facebookincubator/create-react-app

Nhưng sau khi tôi đã cố gắng để làm cho nút đăng nhập Facebook với theo bằng tài liệu chính thức của họ với điều này.

componentDidMount(){ 
    console.log('login mount'); 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '320866754951228', 
      xfbml  : true, 
      version : 'v2.6' 
     }); 

     FB.getLoginStatus(function(response) { 
      //this.statusChangeCallback(response); 
     }); 

    }; 

    (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
} 

Vì vậy, tôi gặp lỗi này khi trình duyệt được làm mới.

Failed to compile. 

Error in ./src/components/user_profile/LoginForm.js 

/Sites/full_stack_production/xxxxx 
    70:13 error 'FB' is not defined no-undef 
    76:13 error 'FB' is not defined no-undef 

✖ 2 problems (2 errors, 0 warnings) 

Vì vậy, tôi đoán vì ESLint gây ra lỗi này. Làm cách nào để sửa lỗi này hoặc tạo ngoại lệ cho biến số FB này?

Cảm ơn!

Answer 1

ESLint không biết rằng biến FB là một toàn cầu. Bạn có thể khai báo một biến bạn tham chiếu như là một toàn cầu bằng cách thêm dòng sau vào phía trên cùng của tập tin của bạn:

/*global FB*/

Để biết thêm thông tin, xem phần "Rule Chi tiết" trên các tài liệu ESLint chính thức: http://eslint.org/docs/rules/no-undef

Answer 2

tôi có thể khắc phục điều này bằng cách sử dụng this.FB thay vì chỉ FB

Answer 3

Nếu bạn sử dụng Tạo phản ứng ứng dụng, bạn cần phải nắm rõ ràng các biến toàn cục từ window.
Ví dụ: nhập khẩu

// It's a global so need to read it from window 
const FB = window.FB; 

Tuy nhiên, nếu thư viện có sẵn như là một gói phần mềm NPM, bạn có thể sử dụng:

// It's an npm package so you can import it 
import $ from 'jquery'; 

Tôi hy vọng điều này sẽ giúp!

Answer 4

Dựa trên những gì @ dan-Abramov ghi trong một bình luận cho câu trả lời khác:

Không sử dụng FB, sử dụng window.FB

Bằng cách này, bạn xác định explicitely nơi nhu cầu FB biến đến từ.

Answer 5

Đặt này trong tập tin .eslintrc của bạn, vì vậy bạn chỉ phải xác định nó một lần và không có trong mỗi tập tin duy nhất:

"globals": { 
    "FB": true 
}