在react jsx中有条件地呈现className

Question

var array = [
['2','35'],
['80','30'],
['300','25']
]

所以这是数组的简化版本，这是我从api调用中得到的。每个子数组的第一个值是数量，第二个值是价格。下面是我的简化状态

this.state = {quantity:''}

在jsx中，我试图做的是根据状态的数量值，有条件地渲染一个名为的类名。只要状态数量发生变化。所选的类也应该相应地更改。下面是我的jsx

{array.map((price, index, arr) => {
if (index < arr.length -1) {
if (parseInt(arr[index+1][0]) > parseInt(this.state.quantity) && parseInt(this.state.quantity) >= parseInt(price[0])){
return (
<div className='price-box selected'>
<h3 className='price'>Tk {price[1]}</h3>
<p className='quantity'>{price[0]} or more</p>
</div>
);
} else {
return (
<div className='price-box'>
<h3 className='price'>Tk {price[1]}</h3>
<p className='quantity'>{price[0]} or more</p>
</div>
);
}
} else {
if (parseInt(this.state.quantity) >= parseInt(price[0])) {
return (
<div className='price-box selected'>
<h3 className='price'>Tk {price[1]}</h3>
<p className='quantity'>{price[0]} or more</p>
</div>
);
} else {
return (
<div className='price-box'>
<h3 className='price'>Tk {price[1]}</h3>
<p className='quantity'>{price[0]} or more</p>
</div>
);
}
}      
})}

这里一切都很好(除了数量0和1之外，所有的条件都按预期评估为false。所以没有一个div被分配给选定的类(。我100%相信有一个更短更好的方法。

Answer 1

命名数据点并构建一个满足selected所有要求的测试。如果selected为true，则使用模板文字指定类名。

{array.map((price, index, arr) => {
const stateQ = parseInt(this.state.quantity);
const dataQs = arr.map((p, i) => i === 0 ? 0 : parseInt(p[0]));

const selectedIndex = dataQs.findIndex((q, i, arr) => {
return stateQ >= q && stateQ < (arr[i+1] || stateQ + 1);
});
const selected = selectedIndex === index;

return (
<div className={`price-box ${selected && 'selected'}`}>
<h3 className='price'>Tk {price[1]}</h3>
<p className='quantity'>{price[0]} or more</p>
</div>
);
})}

Answer 2

也许你正在寻找这样的东西？

Codesandbox 的工作示例

class Quantity extends React.Component {
constructor(props) {
super(props);
this.state = {
quantity: "2"
};
}
render() {
const array = [["2", "35"], ["80", "30"], ["300", "25"], ["2"], ["", "3"]]; // With some errors
return (
<div>
<h1>Hello</h1>
{array.map((row) => {
const condition = this.state.quantity === row[0]; // Create your condition
if (row && row[0] && row[1])
return (
<div className={`price-box ${condition && "selected"}`}> // Called template literal, you can simply include selected if your condition is true
<h3>Quantity {row[0]}</h3>
<p>Price {row[1]}</p>
</div>
);
else return <div>Data error</div>;
})}
</div>
);
}
}