我制作了一個簡單的 npm 包snackbar-notification-js，它是一個顯示snackbar 的函式（在反應應用程式中）。我的包的 index.js 如下
function SnackBar(text, duration) {
var div = document.getElementById('snackbar-js')
if (!div) {
div = document.createElement("div")
div.id = 'snackbar-js'
div.innerHTML = text;
div.style.height = "30px"
div.style.width = "fit-content"
div.style.margin = "10px"
div.style.padding = "10px"
div.style.position = "fixed"
div.style.bottom = "20px"
div.style.left = "20px"
div.style.backgroundColor = "rgb(63, 63, 63)"
div.style.borderRadius = "5px"
div.style.color = "white"
div.style.display = "flex"
div.style.justifyContent = "center"
div.style.alignItems = "center"
div.style.flexDirection = 'column'
div.style.boxShadow = "black 1px 1px 1px"
div.style.minWidth = "100px"
div.style.fontFamily = "'Noto Sans', sans-serif"
document.body.innerHTML = `<style> @keyframes show{ 0%{bottom: -100px;visibility: hidden;} 100%{bottom: 20px;visibility: visible;} } @keyframes hide{ 0%{bottom: 20px;visibility: visible;} 100%{bottom: -100px;visibility: hidden;} } @keyframes snackbar-loader{ 0%{width:100%;} 100%{width:0%;} } #snackbar-js::after{ content: ''; width: 100%; height: 4px;position:absolute;bottom:0px;left:1px;border-radius:5px;background-color: red; animation: snackbar-loader ${duration/1000}s forwards linear; } </style>`
div.style.animation = "show 0.5s ease-out forwards"
setTimeout(() => {
div.style.animation = "hide 0.5s ease-out forwards"
setTimeout(()=>{div.remove()},500)
}, duration);
document.body.appendChild(div)
}
else {
div.innerText = text;
}
}
module.exports = SnackBar;
現在我正在使用這個模塊在我的反應應用程式中顯示snackbar（通知），但它給出了一個錯誤，即 SnackBar 不是一個函式。我的 App.js 如下 App.js
import './App.css';
const SnackBar = require('snackbar-notification-js')
function App() {
function func(){
SnackBar("shlok",2000)
}
return (
<button onClick={()=>func()}>click me</button>
);
}
export default App;
錯誤：
但是，如果我直接使用它（沒有反應應用程式）
示例
，它可以正常作業
任何幫助表示贊賞。謝謝！
uj5u.com熱心網友回復：
由于您的代碼對我有用，我假設您沒有正確安裝軟體包。嘗試npm uninstall snackbar-notification-js然后使用npm install snackbar-notification-js.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455471.html
標籤：javascript 节点.js npm 模块 npm-发布