Использовать объект, включенный в глобальный тег <script> внутри компонента React
Я пытаюсь добавить PayPal кнопка с помощью React.
Согласно paypals dev гид мне нужно включить
<script src = "https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
в теге <head></head> в index.html, а затем используйте
import React from "react";
import ReactDOM from "react-dom"
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
function YourComponent() {
const createOrder = (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01",
},
},
],
});
};
const onApprove = (data, actions) => {
return actions.order.capture();
};
return (
<PayPalButton
createOrder = {(data, actions) => createOrder(data, actions)}
onApprove = {(data, actions) => onApprove(data, actions)}
/>
);
}
Однако
const PayPalButton = paypal.Buttons.driver("react", {React, ReactDOM});
строка выдает ошибку
'paypal' is not defined no-undef
Если объект, включенный из внешнего <script>, не загружен. Как я могу загрузить объект загрузки из внешнего <script> в компонент React?
не компилируется с этой ошибкой
@Darlyn — см. предыдущий комментарий Джареда о переопределении вашего линтера.
@Quentin TBF Я редактировал это примерно в то же время, когда он это публиковал.
@JaredSmith да, использование окна ... сработало, можете ли вы опубликовать комментарий в качестве ответа на вопрос, как подавить линтер? Не смог найти ответа на свой вопрос, прежде чем опубликовать его, и я уверен, что многие люди, которые работают с react/js раз в год, наткнутся на эту проблему, как и я.
@Darlyn сделал, рад помочь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Есть два способа сделать этот круг квадратным:
const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
Помните, что в Javascript глобальные переменные также являются свойствами глобального объекта (window в браузере). Мне на самом деле нравится делать это для глобальных переменных, потому что в коде очень четко видно, что эта штука является глобальной переменной, а не читается и думает: «WTF, откуда это взялось?».
Вы также можете (предполагая ESLint) напрямую подавить предупреждение о ворсе (НЕ рекомендуется):
// eslint-disable-line no-undef
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
window.paypal.whatever. А если серьезно: не путайте предупреждение о линтере с фактическая ошибка. Ваш код должен нормально работать как есть. Если предупреждение линтера блокирует конвейер сборки или что-то еще, вы можете подавить его директивным комментарием или явно использовать глобальный объект окна.