时间戳

首页 > 解决方案 > React 问题 - 您如何控制网格中特定“图块”的状态？

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>
)

标签： javascriptreactjs

解决方案

您可以创建一个代表 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>
  )
}

希望这可以帮助！

推荐阅读