¿Se pueden utilizar, los métodos de javascript para acceder o modificar el DOM como .document.getElementById, .getAttribute, .setAttribute etc...
en React?
He visto que se pueden utilizar los refs
para seleccionar un nodo pero en mi caso necesito acceder a los hijos o cambiar alguno de sus atributos y no se si es correcto hacerlo, o debería cambiarlo. Dejo un ejemplo donde he utilizado javascript para hacer un svg.
import React from "react";
import {v4} from 'uuid';
export default class PieChart extends React.Component {
render() {
let viewBox = ` -${this.props.width * 2} -${this.props.width * 1.2} ${this.props.width * 4.5} ${this.props.width * 2.3}`
let transform = "rotate(0 0 0)"; //if you want it rotated a certain angle change the first number in the this transform object
return (
<div className="borde itemX1" >
<h4 className="fullWidth">Detalle de Etapa</h4>
<div className="centerPie">
<svg id="svg" width="100%" height="100%" viewBox={viewBox} transform={transform}>
{getPaths(this.props.slices, this.props.width)}
</svg>
</div>
</div>
);
}
}
function getCoordinatesForPercent(percent) {
const x = Math.cos(2 * Math.PI * percent);
const y = Math.sin(2 * Math.PI * percent);
return [x, y];
}
let cumulativePercent = 0;
const getPaths = (slices, size) => {
let paths = [];
slices.forEach((slice, index) => {
let [startX, startY] = getCoordinatesForPercent(cumulativePercent);
cumulativePercent += slice.percent;
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
const largeArcFlag = slice.percent > .5 ? 1 : 0;
const pathData = [
`M ${startX * size} ${startY * size}`, // Move
`A ${size} ${size} 0 ${largeArcFlag} 1 ${endX * size} ${endY * size}`, // Arc (size is same as radius)
`L 0 0 Z`, // Line
].join(' ');
let medioX = ((startX * size) + (endX * size)) / 2;
let medioY = ((startY * size) + (endY * size)) / 2;
let translateX;
let translateY;
function enter(e) {
translateX = -medioX / 10;
translateY = -medioY / 10;
if (slice.percent < 0.5) {
translateX = -translateX;
translateY = -translateY;
}
if (!e.target.getAttribute('transform')) {
let x = e.target.parentElement.children;
[...x].filter(p => p.tagName !== "g").map(p => {
p.setAttribute('transform', '');
p.setAttribute('class', '');
return null;
})
e.target.setAttribute('transform', 'translate(' + translateX + ',' + translateY + ')');
e.target.setAttribute('class', 'sliceSeleccionado')
}
else {
e.target.setAttribute('transform', '');
e.target.setAttribute('class', '');
}
}
const style = {
'fill': slice.color,
'strokeWidth': 3,
'stroke': 'rgb(0, 0, 0)'
}
paths.push(<path className="" onClick={enter} d={pathData} fill={slice.color} key={v4()} />)
paths.push(
<g transform="translate(400 -300)" key={v4()}>
<rect width="20" height="20" style={style} transform={"translate(" + (10) + " " + (-10 + index * 50) + ")"} />
<text x="40" fill={slice.color} fontSize="2em" transform={"translate(" + (10) + " " + (10 + index * 50) + ")"}>Lorem Ipsum</text>
</g>
)
});
return paths;
}
Se podrían utilizar .target, .parentElement, .children, setAttribute
o hay alguna otra manera de hacerlo
<path className={condicion ? 'active': 'inactive'} />
y sería equivalente a en tu onClick hacer estoe.target.setAttribute('class', condition ? 'active' : 'inactive')
. Parte de ahí, investiga bastante, lee bastante, documentate – German Alzate el 17 may. 19 a las 14:09