我正在尝试使用React中的某些条件映射我的表。我的表有12列（一年中的月份）。我有一个提供“ MM”编号的json响应。我从['01'，...，'06'，...，'12']硬编码了一个'MM'数组
let monthNum = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
// json response: month = ['01', '05', '02']
tableBody = (
<tr>
{monthNum.forEach((day, idx) => {
month.forEach((d,i) => {
if(d === day) {
time = 'X'
month.splice(d[i], 1)
}
else {
time = 'O'
}
})
return <td>{time}</td>
})}
</tr>
)
// Output: X X O O X X X X X X X X
// Expected Output: X X O O X O O O O O O O
也许有一种更简单的方法可以做到，而我只是使其变得更加复杂...
您可以使用.includes()您month若当前检查monthNum你是映射.map()为您的内部month数组。如果是X，则可以显示是否，如果不是，则可以这样显示O：
const MonthTable = () => {
const monthNum = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const month = ['01', '05', '02'];
return (
<table>
<tr>
{
monthNum.map(m => <td>{month.includes(m) ? 'X':'O'}</td>)
}
</tr>
</table>
);
}
ReactDOM.render(<MonthTable />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句