Как исправить ошибку «FB» не определен no-undef в проекте create-react-app?

Question

Я сделал проект, используя эту ссылку в качестве исходного файла.

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

Но после того, как я попытался сделать кнопку для входа в Facebook с последующими их официальной документацией с этим.

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')); 
} 

Так что я получил эти ошибки, когда браузер был обновлен.

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) 

Так что я думаю, потому что ESLint вызывает эти ошибки. Как я могу исправить это или сделать исключение для этой переменной FB?

Спасибо!

Answer 1

ESLint не знает, что переменная FB является глобальным. Вы можете объявить переменную, которую ссылаются как глобальные, добавив следующего в верхнюю части файла:

/*global FB*/

Для получения более подробной информации, обратитесь к разделу «Сведение о правиле» на официальных ESLint документов: http://eslint.org/docs/rules/no-undef

Answer 2

я могу это исправить с помощью this.FB вместо этого просто FB

Answer 3

Если вы используете приложение Create React, вам необходимо явно захватить глобальные переменные от window.
Например:

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

Однако, если библиотека доступна в виде пакета НМП, вы можете использовать импорт:

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

Я надеюсь, что это помогает!

Answer 4

Основываясь на том, что @ дан-Абрамов заявил в комментарии к другому ответу:

Не используйте FB, используйте window.FB

Таким образом, можно определить явно где переменные потребности FB приехать из.

Answer 5

Поместите это в файле .eslintrc, так что вы должны определить только один раз, а не в каждом отдельном файле:

"globals": { 
    "FB": true 
}