Javascript 回答问题-您如何控制特定'；瓷砖'；在网格内？

我正在创建一个基于网格的react网站。它使用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>
)

render（）{
返回(
开始的一周：
6月1日
开始的一周：
开始的一周：
清洁厨房
购买公寓用品
洗碗巾
)
React主要关注基于组件的体系结构，以降低代码复杂性和可重用性

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

为便于参考，请阅读以更深入地理解它
您可以创建一个表示9个框之一的通用组件

然后在父对象中，管理数组中这9个框的状态，并通过在该数组上循环来渲染它们

钩子

函数ParentComponent（）{
const[boxValues，setBoxValues]=useState（[a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']）；
返回(
{boxValues.map（（boxText，idx）=>}
)
}
函数ChildComponent（{text，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>
  )
}

类ParentComponent扩展了React.Component{
建造师（道具）{
此.state={
框值：['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h'、'i']
}
}
返回(
{this.state.boxValues.map（（boxText，idx）=>}
)
}

希望这能有所帮助！
嘿，谢谢你，这很有道理！不过我对挂钩不太熟悉，你有没有可能用无挂钩的react发送代码？
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>
  )
}