Estoy tratando de hacer una cuadrícula hexagonal y cada uno de los hexágonos para tener accesorios de datos con coordenadas xyz y con valor. Me las arreglé para hacer la lógica para crear la cuadrícula y las coordenadas, pero no puedo encontrar la manera de conectarlos. Cuando trato de asignar accesorios x, y, z, aparece TypeError y dice que no puedo cambiar los accesorios en Element. El código:
import { StyledHexagonGrid } from './StyledHexagonGrid.jsx'; import Hexagon from '../Hexagon/Hexagon.jsx'; export const coordinatesCalc = (radius) => { let coordinateRadius = radius - 1; let coordinates = []; for (let x = -coordinateRadius; x < coordinateRadius + 1; x++) { for (let z = -coordinateRadius; z < coordinateRadius + 1; z++) { for (let y = -coordinateRadius; y < coordinateRadius + 1; y++) { let sum = x + y + z; let coordinate = { x, y, z }; if (sum === 0) { coordinates.push(coordinate); } } } } return coordinates; }; function HexagonGrid({ dataparentToChild }) { let passedRadius = Object.values({ dataparentToChild }); let radius = passedRadius[0]; let columns = 2 * radius - 1; let height = 600 / columns; let width = height * 1.1547; let dom_content = []; for (let i = 0, j = radius - 1; i < columns; i++, j--) { for (let k = 0; k < columns - Math.abs(j); k++) { let left = width * 0.75 * i; let top = k * height + Math.abs(j * (height / 2)); dom_content.push( <StyledHexagon style={{ top: `${top}px`, left: `${left}px`, width: `${width}px`, height: `${height}px`, }} data-x='' data-y='' data-z='' value='' /> ); } } console.log(dom_content); let coordinates = coordinatesCalc(radius); let hexElements = []; for(let i=0;i<coordinates.length;i++){ let el = dom_content[i]; el.props.x = coordinates[i].x; el.props.y = coordinates[i].y; el.props.z = coordinates[i].z; hexElements.push(el); } console.log(hexElements); return ( <StyledHexagonGrid> <Hexagon dataparentToChild={passedRadius[0]} /> </StyledHexagonGrid> ); } export default HexagonGrid;