使用随机着色的单元格以5×5表格呈现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用随机着色的单元格以5×5表格呈现相关的知识，希望对你有一定的参考价值。
我有一张尺寸为5x5的桌子。我需要将其中一个单元格的颜色随机更改为蓝色。
ReactJS的最佳实践方法是什么？
纯JS中的外观示例：https://codesandbox.io/s/summer-brook-by835?file=/src/index.js
答案
您可以跟踪随机选择的单元格（例如，作为[x，y]索引的数组），然后更新您的状态（在计时器滴答或单击按钮时，这样就可以重新渲染矩阵：
const { useState } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const App = () => {
const randomXY = () => [0|Math.random()*5, 0|Math.random()*5],
[cell, setCell] = useState(randomXY()),
nextCell = () => setCell(randomXY())
return (
<div>
<div className="wrapper">
{
[...Array(5)]
.map((_,i) => (
<div className="row">
{
[...Array(5)]
.map((_,j) => (
<div
className={`cell${i == cell[0] && j == cell[1] ? ' blue' : ''}`}
/>
))
}
</div>
))
}
</div>
<button onClick={nextCell}>Reset</button>
</div>
)
}
render (
<App />,
rootNode
).wrapper {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 20px;
height: 20px;
border: 1px solid black;
}
.blue {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>以上是关于使用随机着色的单元格以5×5表格呈现的主要内容，如果未能解决你的问题，请参考以下文章
是否可以预加载所有 tableview 单元格以启用平滑滚动？