反应问题 - 您如何控制网格中特定"瓷砖"的状态？

Question

我正在创建一个基于网格的反应网站。它使用一个 4x4 网格，包含 16 个方形"瓷砖"见图像。 无论如何，我希望能够输入文本并更改这些磁贴中的 9 个(图像中的蓝色磁贴(的状态 - 那么最好的方法是什么？创建一个单独的组件来处理所有 9 个磁贴，还是必须为 9 个磁贴中的每一个创建一个组件？下面是我的主网格组件中的代码。 谢谢你们！

render(){
return(
<div className = 'grid-position'>
<div className ='grid'>
<div className = 'box date0'></div>
<div className = 'box date1'>Week Starting: <br/>1st June</div>
<div className = 'box date2'>Week Starting:</div>
<div className = 'box date3'>Week Starting:</div>
<div className = 'box task1'>Clean Kitchen</div>
<div className = 'box card1'></div>
<div className = 'box card2'></div>
<div className = 'box card3'></div>
<div className = 'box task2'>Buy flat supplies</div>
<div className = 'box card4'></div>
<div className = 'box card5'></div>
<div className = 'box card6'></div>
<div className = 'box task3'>Wash dishtowels</div>
<div className = 'box card7'></div>
<div className = 'box card8'></div>
<div className = 'box card9'></div>
</div>
</div>
)

Answer 1

您可以创建一个表示 9 个框之一的通用组件。

然后在你的父级中，你将管理数组中这 9 个盒子的状态，并通过循环访问该数组来呈现它们。

钩

function ParentComponent() {
const [boxValues, setBoxValues] = useState(['a','b','c','d','e','f','g','h','i']);
return (
<React.Fragment>
{boxValues.map((boxText, idx) => <ChildComponent key={`${boxText}-${idx}`} text={boxText} idx={idx} />}
</React.Fragment>
)
}
function ChildComponent({text, idx}){
return (
<div className={`box-card-${idx}`} />
)
}

由于这是一个简单的例子，所以它们大多是相同的。最大的区别是状态声明：

类：

class ParentComponent extends React.Component {
constructor(props) {
this.state = {
boxValues: ['a','b','c','d','e','f','g','h','i']
}
}
return (
<React.Fragment>
{this.state.boxValues.map((boxText, idx) => <ChildComponent key={`${boxText}-${idx}`} text={boxText} idx={idx} />}
</React.Fragment>
)
}

希望这有帮助！

Answer 2

React 基本上专注于基于组件的架构，以降低代码复杂性和可重用性。

因此，最好的方法是创建一个单独的组件来处理磁贴。

作为参考，请阅读此博客以更深入地理解它