示例

Question

我正在制作一个minesweeper应用程序，以响应本机作为个人项目来尝试和学习这些概念。我遇到的问题是尝试同时更新多个子对象。我不确定这是否是最佳做法。

我有3个组成部分：游戏>网格>单元格。游戏组件负责游戏的逻辑，例如计时器/获胜条件/失败条件。网格是单元格的集合，并确定每个单元格应该是什么。

游戏组件：

render() {
    return (
        <Grid
            action={this.props.action}
            firstClick={this.state.firstClick}
        />
    );
}

我将状态firstClick传递给等于true的网格组件。意思是当我点击第一个单元格时，我希望它显示所有周围的邻居，而第一次单击等于true。

网格组件：

_renderItem = ({ item }) => (
    <Cell
        item={item}
        neighbours={this.state.neighbours[item.key.substring(0,1)][item.key.substring(1,2)]}
        firstClick={this.props.firstClick}
    />
);

render() {
    return (
        <FlatList
            data={this.state.flatGrid}
            renderItem={this._renderItem}
            keyExtractor={this._keyExtractor}
            numColumns={10}
        />
    );
}

网格是单元格的一个平面列表，并且在点击每个网格时，网格知道每个单元格的相邻单元格。我遇到的问题是我不确定应该在何处更新窃听单元及其相邻单元的状态。我希望将该单元格及其所有邻居的isHidden状态设置为false。

应该在网格组件还是单元组件中处理？我不确定如何在不破坏封装的情况下解决这个问题。

这些是我的单元组件中的状态

constructor(props) {
super(props);

this.state = {
  isFlagged: false,
  isHidden: true,
  value: '',
  id: ''
};

谢谢！

Answer 1

这可以使您的生活更轻松。

首先，您的单元格应该是PureComponent，并且永远不要将状态存储在单元格中。唯一的原因是该单元将在某个时候被重用，并且整个屏幕可能会开始随机运行。您可以将每个单元模型的状态存储在数据源中。

最后，您应将回调函数以props的形式传递给您的单元格。轻按单元格后，然后计算Grid组件中的相邻单元格。计算出此值后，请相应地更改适当的单元格模型。

示例

class Grid extends React.Component {
  state = {
    dataSource: [{
      isFlagged: false,
      isHidden: true,
      value: '1',
      id: '1',
    }, {
      isFlagged: false,
      isHidden: true,
      value: '2',
      id: '2',
    }],
  };

  onCellClicked = (item) => {
    // Find neighbouring items and replace the modified items in the state in this function
  }

  _renderItem = (item) => {
    return <Cell onClick={() => this.onCellClicked(item)} item={item}>;
  }

  render() {
    return (
      <FlatList data={this.state.dataSource} renderItem={this._renderItem}/>
    );
  }
}

反应本地更新多个子组件状态

1 个答案:

示例