0
156
VistasCómo escribir código JS dentro del método de retorno en React.js
Hay una variable llamada "checkPwd" que tiene 3 valores opcionales. "correcto", "vacío" e "inválido" El método de retorno debe devolver varios elementos HTML basados en esta variable. Como esto.
<FormControl> <Stack style={styles.stack}> <Input type="password" placeholder="Confirm Password" isInvalid={checkPwd == "correct" ? false : true} /> { if (checkPwd == "empty") { <FormControl.ErrorMessage> Please confirm password. </FormControl.ErrorMessage> } else if(checkPwd == "invalid") { <FormControl.ErrorMessage> Password is not strong enough. </FormControl.ErrorMessage> } } </Stack> </FormControl>Pero este código produce un error durante la compilación. Espero sus amables colaboraciones.
3 Respuestas
Responde la pregunta0
Puede agregar una condición como esta:
{checkPwd == "empty" && ( <FormControl.ErrorMessage> Please confirm password. </FormControl.ErrorMessage> )} {checkPwd == "invalid" && ( <FormControl.ErrorMessage> Password is not strong enough. </FormControl.ErrorMessage> )}0
Puede extraer su lógica a una función , puede escribirla en este estilo if/else . Luego, en JSX, simplemente ejecutaría la función como {someFunction()}
export default function App() { const checkPwd = "empty"; const someFunction = () => { if (checkPwd === "empty") { return <div>Please confirm password.</div>; } else if (checkPwd === "invalid") { return <div>Password is not strong enough.</div>; } return null; }; return ( <> <div> <input type="password" placeholder="Confirm Password" /> {someFunction()} </div> </> ); } 
Sin embargo, un enfoque más común sería tener un operador ternario en línea en el JSX para controlar qué renderiza según la condición.
export default function App() { const checkPwd = "empty"; return ( <> <div> <input type="password" placeholder="Confirm Password" /> {checkPwd === "empty" ? ( <div>Please confirm password.</div> ) : checkPwd === "invalid" ? ( <div>Password is not strong enough.</div> ) : null} </div> </> ); }
Y finalmente, si solo está asignando códigos de error de validación a valores de cadena (tal vez recibió un código de error feo del servidor pero desea mostrar algo más legible para el usuario), dejaré este enfoque aquí para que lo considere.
const errorCodeMap = { empty: "Please confirm password", weak: "Password is not strong enough", short: "Password is not long enough", unmatched: "Both password values must match", missingNumber: "Password must incliude a number" }; export default function App() { const errorCode = "short"; return ( <> <div> <input type="password" placeholder="Confirm Password" /> {!!errorCode && <div>{errorCodeMap[errorCode]}</div>} </div> </> ); }
0
Esto se debe a que jsx no admite declaraciones if else , en su lugar, puede usar el operador ternary
{checkPwd == "empty" ? ( <FormControl.ErrorMessage> Please confirm password. </FormControl.ErrorMessage> ) : checkPwd == "invalid" ? ( <FormControl.ErrorMessage> Password is not strong enough. </FormControl.ErrorMessage> ) : null}