Tenía algunas preguntas sobre la comunicación entre los componentes de React.js. Esto está en contexto sin el uso de redux. Así es como se ve mi jerarquía de componentes.
App / \ / \ | | ▼ ▼ Board Dashboard | ▼ CellA continuación hay algunas suposiciones/patrones que utilizo para que los componentes se comuniquen.
Si necesitamos pasar mensajes de un componente principal a componentes secundarios, lo hacemos usando accesorios. Por ejemplo, mientras creamos un Tablero, pasamos filas, columnas como accesorios.
<Board rows={5} cols={5} />Si necesitamos pasar mensajes de un componente secundario a componentes principales, lo hacemos pasando una devolución de llamada. Por ejemplo, pasamos una devolución de llamada play() de Board a Cell. Dentro de Cell, configuramos el controlador onClick para que sea la devolución de llamada pasada, es decir, play().
<Cell onClick={this.props.play(this.props.id)} />La pregunta abierta que tenía era cómo se pueden pasar mensajes entre componentes hermanos (ejemplo Dashboard to Cell). Un caso de uso es restablecer mi componente Board cuando se hace clic en un botón de reinicio dentro del componente Dashboard. Así es como se ve el botón de reinicio dentro del Tablero. Mi pregunta es una vez que el mensaje de reinicio llega al componente de la aplicación, ¿cuál es la mejor práctica para pasarlo a Board?
<input type="button" value="reset" onClick={this.props.reset} />Sería genial recibir comentarios sobre 1 y 2. Además, la mejor práctica para 3.
redux
Esta es la razón exacta por la que Redux es tan genial. Si está utilizando Redux, todos estos componentes tienen una sola cosa en común; todos están leyendo sus valores desde el estado de la aplicación. El flujo que usaría es el siguiente:
El usuario hace clic en el botón de reinicio que se encuentra dentro del componente del tablero
La función asociada con ese clic solo hace una cosa. Despacha una acción "RESET_BOARD"
En el reductor, la acción RESET_BOARD restablece el estado de la placa.
Cuando se vuelve a renderizar, el tablero se pasa en accesorios, al igual que antes, solo se le pasa el estado vacío.
Sin reducción
Si no tiene redux a mano, entonces el enfoque de devolución de llamada del padre es la forma sensata de hacerlo. Si está manteniendo el estado en el componente de la App , la aplicación luego restablece su estado y activa una nueva representación manualmente. Esto hará que el tablero se vuelva a renderizar con diferentes accesorios.
Pero también es restricción; la comunicación entre dos componentes está restringida en 3 casos:
Actualizaciones de los padres Niño:
El niño actualiza al padre:
hermanos (Hermanos) se actualizan entre sí (hermano)
Busquemos su pregunta ahora. Su pregunta es sobre el tercer caso:
App ) sea un proxy para transferir la comunicación. App / \ / \ | | ▼ ▼ Board Dashboard | ▼ Cell reset(event) { //.... local calls (concerning Dashboard or its children ) // then , external calls (concerning outside Dashboard) if(this.props.onReset) this.props.onReset(event); } <input type="button" value="reset" onClick={this.reset} />Dashboard , Board>Cell ]): onDashboardReset(event) { this.setState({dashboardIsReset: true}) } <Dashboard onReset={this.onDashboardReset} /> <Board dashboardIsReset={this.state.dashboardIsReset} /> // ... has props `dashboardIsReset` and forward it to its children (`Cell`) if needed