0
148
ViewsCómo devolver un objeto condicionalmente
Estoy trabajando en un proyecto de aplicación web y tengo el siguiente componente que devuelve el objeto Menu antd.
const items = [ { label: <Link to='/register'>Register</Link>, key: 'register', icon: <UserAddOutlined />, style: { marginLeft: 1030}, // problem: hard-coded margin }, { label: <Link to='/login'>Login</Link>, key: 'login', icon: <UserOutlined />, style: { marginLeft: 'auto'}, }, ]; return <Menu mode="horizontal" items={items} />; Ahora tengo un objeto llamado user . Si user no es nulo (lo que significa que hay un usuario que está conectado actualmente), quiero ocultar el register en el objeto de los items anteriores; de lo contrario, quiero mostrar el register en el Menu . El componente Menu se verá así:
Alguien me puede ayudar con eso?
2 answers
Answer question0
Puede insertar este código después de declarar items ,
if(users!==null) { items.splice(0,1) //removes first array element which is the register button }Le recomendaría encarecidamente que use el estado para este propósito porque esa es la forma prevista para tales casos.
Con eso me refiero a encapsular el objeto de items en un estado y usar el código anterior durante cada renderización usando algo como useeffect hook
Mire la pregunta y la respuesta verificada a continuación para comprender cómo hacerlo en las versiones más nuevas de reaccionar
cómo actualizar un objeto usando useEffect en Reactjs y Typescript
0
Solo debe recordar que items son una matriz regular. No todo en React son objetos exóticos. Gran parte de su código utilizará objetos normales como cadenas, matrices, números, etc. No se deje cegar por la sintaxis literal de la matriz que olvida que es solo una matriz.
Ya hay una respuesta que muestra lo que puede hacer con la matriz de items para eliminar el primer elemento. Pero también puedes escribirlo simplemente:
let items = []; if (user !== null) { items.push({ label: <Link to='/register'>Register</Link>, key: 'register', icon: <UserAddOutlined />, style: { marginLeft: 1030}, // problem: hard-coded margin }) } items.push({ label: <Link to='/login'>Login</Link>, key: 'login', icon: <UserOutlined />, style: { marginLeft: 'auto'}, }) return <Menu mode="horizontal" items={items} />;