Restyle Реагирует на дочерние компоненты динамически от родительского с помощью определенного свойства

Question

У меня есть игра в шахматы, которую я строю с React-Redux ...

Проблема, с которой я сталкиваюсь, заключается в том, как выделить квадраты, доступные для фигуры, чтобы перейти к моей текущей архитектуре.

Я пытался передать данные от детей к родителю через реквизит, но, похоже, это не работает. Я также попытался использовать ссылки и столкнулся с гораздо более глупыми проблемами. Я думаю, что я упускаю что-то очевидное здесь ...

<Board/> 

состоит из массива 64:

<Square key={} />

компоненты. У каждого есть ключевая опора, представляющая собой шахматный квадрат, например, «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>
)