Quiero cambiar el texto de un componente de función secundario cuando paso el mouse sobre un botón de mi componente de clase principal. Tengo problemas para acceder al accesorio en el componente secundario y me anulo. Cualquier ayuda es apreciada
componente principal:
export default class PathfindingVisualizer extends React.Component { constructor(props) { super(props) this.state = { AlgoDef: null, }; } render() { return ( <React.Fragment> <div className="button-bar"> //buttons that change state <button onClick={() => this.helperDikjstras()} onMouseOver={() => this.setState({ AlgoDef: "Dikj"})} >Dikjstras</button> <button onClick={() => this.helperAstar()} onMouseOver={() => this.setState({ AlgoDef: "Astar"})} >A*</button> </div> <div> <AlgoExplaination algoName={this.AlgoDef} /> //changes its text based on state of parent </div> </React.Fragment> ); } }mi componente hijo:
export default function AlgoExplaination(props) { const [text, setText] = useState("default"); useEffect(() => { switch (props) { case "Dikj": setText("Dikjstra"); break; case "Astar": setText("Astar"); break; default: setText("useEff"); } //console.log(`text: ${text}`); //console.log(props); // console.log(props.algoName); }); return ( <div> <p>{text}</p> </div> ) } ambos props de registro de la consola me dan: {algoName: null} . y props.algoName me da null
Como @Rajesh ha mencionado en un comentario, está pasando accesorios a su AlgoExplaination (sic) incorrectamente de esta manera:
<AlgoExplaination algoName={this.AlgoDef} /> Tenía la intención de pasar la propiedad AlgoDef de su estado, que es this.state.AlgoDef , así que cámbielo de acuerdo con esto:
<AlgoExplaination algoName={this.state.AlgoDef} /> Además, cuando accede a la propiedad algoName de sus accesorios, actualmente intenta acceder a ella como si fuera el propio objeto de accesorios incorrectamente de esta manera:
switch (props) { El objeto props para AlgoExplaination será un objeto con una propiedad algoName que se verá (parcialmente) así:
{ algoName: "Dikj" } Por lo tanto, el valor que necesita se almacena en props.algoName . Por lo tanto, cambie en consecuencia a esto:
switch (props.algoName) {Como @Wyck ha abordado la mayoría de los puntos, centraré esta respuesta en el último punto:
En tercer lugar, ¿por qué tiene tanto el componente de clase como el componente funcional con ganchos? Utilice 1 vía
En teoría, un componente de clase tiene eventos de ciclo de vida y estado, mientras que un componente funcional es solo una función que devuelve JSX.Element . Dichos componentes fueron llamados sin estado.
Debido a esto, el componente de clase tenía un poco de sobrecarga sobre el componente funcional y, como opción de rendimiento, se prefirió el componente funcional.
Los ganchos son una forma de reaccionar para dar acceso a los componentes funcionales para tener su propio estado y pocos eventos importantes del ciclo de vida. Esto se logra mediante el cierre ( sin profundizar ) y la artesanía. Esto también hace que los componentes de clase queden obsoletos, ya que todo se puede lograr en un componente funcional.
Como preferencia, se sugiere usar componentes funcionales con ganchos, ya que son fáciles de usar y también tienen un buen rendimiento, en comparación.
En la práctica de programación general, como desarrollador, debe usar una sola forma de hacer las cosas. El beneficio de esto es que ayuda en la lectura rápida.
Si uso un ciclo for en una sección y un Array.forEach en la siguiente, como desarrollador, se me pedirá que lea y comprenda el propósito. Esto agrega sobrecarga y reduce la legibilidad. Tener el mismo enfoque mueve el enfoque del lector solo a la lógica.
Te recomiendo desestructurar los accesorios, para ser más claro.
En
export default function AlgoExplaination(props)Puede ser algo como:
export default function AlgoExplaination({algoName})Entonces puede usarlo en su declaración de cambio.
switch (algoName) { case "Dikj": setText("Dikjstra");En este momento, está pasando todos los accesorios, pero tendrá que acceder como props.algoName en la declaración de cambio.