En primer lugar, soy más nuevo en reaccionar, así que siéntase libre de criticar cualquier tipo de problema arquitectónico que tenga, siento que hay una mejor manera de escribir esto, pero he estado luchando durante una hora tratando de hacerlo funcionar.

Elemento principal (TileGrid):

 import React, { Component } from 'react' import Tile from './Tile.js'; export default class TileGrid extends Component { constructor(props) { super(props); } updateTileData(value) { {/* Do something with value here */} } render() { this.test() return ( {/* The Tile component is a custom button with some richer features. */} <Tile name='Dog' image='dog' /> ) } }

Elemento secundario (mosaico):

 import React from 'react'; import ButtonBase from '@mui/material/ButtonBase'; import './styles/Tile.css'; function Tile(props) { return( <div className="Tile"> <ButtonBase onClick={/* This is where the Tile needs to call updateTileData in TileGrid */}> Button </ButtonBase> </div> ); } export default Tile;

Entonces, hay una función dentro de TileGrid llamada updateTileData que tomará algunos datos y los usará para actualizar el estado de TileGrid. El componente Tile existe como elemento secundario dentro del componente TileGrid. He intentado todo tipo de cosas aquí, pero parece una tarea sencilla, ¿hay una mejor manera de escribir esta funcionalidad? No estoy atado a nada en el código, por favor dígame si hay una mejor manera de hacer esto. Todavía estoy aprendiendo este marco y este problema me tiene colgado. Gracias, arquero.