TA貢獻1886條經驗 獲得超2個贊
import { scanner } from 'scanner-js';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
scan = () => {
scanner.scan(this.displayImagesOnPage, {
output_settings: [
{
type: 'return-base64',
format: 'jpg',
},
],
});
};
displayImagesOnPage(successful, mesg, response) {
if (!successful) {
// On error
console.error('Failed: ' + mesg);
return;
}
if (
successful &&
mesg != null &&
mesg.toLowerCase().indexOf('user cancel') >= 0
) {
// User cancelled.
console.info('User cancelled');
return;
}
var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
for (
var i = 0;
scannedImages instanceof Array && i < scannedImages.length;
i++
) {
var scannedImage = scannedImages[i];
var elementImg = scanner.createDomElementFromModel({
name: 'img',
attributes: {
class: 'scanned',
src: scannedImage.src,
},
});
}
}
render() {
return (
<div>
<button type="button" onClick={this.scan}>
Scan
</button>
</div>
);
}
}
export default Home;
當我將鼠標懸停在該scanner對象上時，會顯示以下內容，但我不知道為什么它會拋出未定義的錯誤。
有人可以幫我找到問題嗎？
TA貢獻2003條經驗 獲得超2個贊
這是因為你導入錯了。如果您在 npm 上檢查包，您可以看到沒有導出的模塊，因此您無法導入單個導出（import {scanner} from 'scanner-js'），也無法導入默認導出（import scanner from 'scanner-js）。
您只需導入整個模塊即可產生副作用，并且它將scanner向window對象添加一個全局變量。
import 'scanner-js';
console.log(typeof scanner);
// => object
console.log(typeof scanner.scan);
// => function
如果您使用 ESLint，則需要添加scanner為全局變量。
CodeSandbox鏈接：https://codesandbox.io/s/scanner-js-hcz2j
舉報