有一個 React 組件 -
'功能產品（道具）{
const {
prod_id: id,
prod_name : title,
prod_status: status,
prod_price: price,
prod_oldprice : oldPrice,
} = props;
let oldPriceChecker = (oldPriceValue) => {
if (oldPriceValue) {
let oldPriceStr = oldPriceValue ' z?';
return(oldPriceStr);
}else {
return('');
}
}
let statusChecker = (value) => {
if (value != undefined){
let string = value;
let array = string.split(',');
console.log(array);
array.map(n => <div className="status">{n}</div>)
}
}
return (
<div className="row">
<div className="card">
<div className="card-image">
<img src="https://via.placeholder.com/150" />
</div>
<div className="card-content">
<span className="card-title">{title}</span>
<hr className="card_hr" />
<p className="card_price" >{price} z?</p>
<div className="card_price old_price">{oldPriceChecker(oldPrice)}</div>
{statusChecker(status)}
</div>
</div>
)
}
出口{產品}
問題：變數 prod_status:status 可以包含多個值（例如，“new,promotion”，如果是，則需要將其拆分為兩個單詞并為每個單詞創建一個單獨的塊，因為現在該塊帶有整行
像這樣是必要的（新的，售罄等。在單獨的塊中）
我試圖創建一個函式，但它只是將一個陣列輸出到控制臺
我想我沒有正確使用屬性“地圖”
uj5u.com熱心網友回復：
問題：
您創建的函式statusChecker不回傳任何內容。因此，當您想列印它時 ( {statusChecker(status)}) 它什么也不做。
let statusChecker = (value) => {
if (value != undefined){
let string = value;
let array = string.split(',');
console.log(array);
//This is what you want to return but is not returned
array.map(n => <div className="status">{n}</div>)
}
}
解決方案：
從函式回傳映射的陣列。
let statusChecker = (value) => {
if (value != undefined){
let string = value;
let array = string.split(',');
console.log(array);
//This is what you want to return but is not returned
return array.map(n => <div className="status">{n}</div>)
}
}
uj5u.com熱心網友回復：
您的代碼的主要問題是您試圖通過撰寫它來創建一個 html 元素，這是不可能的。最接近的就是供您使用innerHTML。例如：parent.innerHTML= <div className="status">${n}</div>。作為“父”一個 html 元素之前創建 (document.createEement()) 或已經存在于 DOM 中。
在我的解決方案中，我曾經document.createElement()創建一個 div 并將文本插入其中。該函式回傳一個陣列，其中包含 div 元素及其各自的單詞，但僅此而已，它不會在螢屏上列印任何內容。如果您只想在螢屏上顯示它，則程序會有所不同。
let statusChecker = (value) => {
// Instead of doing " if (value != undefined) I used
let nodes = value?.split(',').map(n => {
// first you have to create an element
let div = document.createElement('div')
// add the class status
div.classList.add('status')
// insert each word into the div
div.textContent = n;
return div
})
return nodes
}
console.log(statusChecker('new,promotion'))轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453580.html
標籤：javascript 反应