Question

我有一个用React-Redux构建的国际象棋游戏...

我遇到的问题是如何突出显示可用的正方形，以便将其迁移到当前的体系结构中。

我尝试通过道具将数据从子级传递到父级，但这似乎不起作用。我也尝试使用refs并遇到了更多愚蠢的问题。我想我这里缺少明显的东西...

<Board/>

由64个数组组成：

<Square key={} />

个组件。每个人都有一个关键道具，即一个象棋正方形ID，例如“ a8”或“ f6”。

我有一个App组件的方法，当单击一个片段时，该方法会返回一组将要移动到的可用正方形。

calculateAvailableSquares(pos, piece, board){
   //returns an array like ["f5", "f4","f3"]
   //TODO get this function to highlight the <Square/>s
   /// that have a key within the returned array
}

如何在我的App组件中激发一个方法，并将更新的className或style道具传递给所有人，并且只有Square组件的键在数组中？

我不知道如何在React中选择这些子级，也不知道如何选择这些子级后，会像这样动态地更改它们。

Answer 1

您提到您正在使用Redux，因此您可以通过调用Redux缩减器之一来设置突出显示哪些正方形的全局状态。

或者，一种更快，更轻松的方法是将函数从父组件传递到所有子组件。

class ParentComponent {
    state = {
        highlightedSquares: []
    }

    setSquareState = square => {
        const highlightedSquares = this.state.highlightedSquares.push(square)
        this.setState({ highlightedSquares })
    }


    render() {
        <div>
            <Square setSquareState={this.setSquareState} />
        </div>
    }
}


const Square = props => (
    <div className={props.isHighligted ? "highlighted" : ""}>
        <button onClick={props.setSquareState}>Highlight</button>
    </div>
)

通过特定属性从父级动态重命名React子组件

1 个答案: