Tengo un componente que recibe un hijo y lo pasa al Menu MUI
export default function MyMenu({children}){ return( <Menu> {children ? children : <MenuItem disabled></MenuItem>} </Menu> ); } children tiene un tipo children: ReactNode;
y le paso elementos de menú así
<MyMenu> {condition && (<MenuItem></MenuItem>)} {condition2 && (<MenuItem></MenuItem>)} </MyMenu> Quiero que cuando todas las condiciones sean falsas para mostrar un elemento de menú deshabilitado
El problema es que child nunca es nulo si paso children como se indica arriba. Y debido a que el elemento de menú deshabilitado nunca se procesa
Si todas las condiciones son falsas, child es una matriz de false. Pero en el código no puedo tratar el apoyo child como una matriz para verificar si contiene solo valores falsos
¿Qué hay de usar React.Children.toArray :
const MyMenu = ({ children }) => { const hasChildren = React.Children.toArray(children) .filter(Boolean) .length > 0 if (hasChildren) { return children } return <MenuItem disabled /> }Nota: No probado.
¿Puedes usar React.Children.count(children) e intentar:
export default function MyMenu({children}){ return( <Menu> {React.Children.count(children) ? children : <MenuItem disabled></MenuItem>} </Menu> ); }puede filtrar la matriz de children (si no fuera una matriz, será un valor primitivo) para eliminar los valores nulos, aquí hay un ejemplo:
const MyMenu = ({ children }) => { const tmp = Array.isArray(children) ? compact(children) : isNil(children) ? undefined : children; return <div>{tmp || tmp.length > 0 ? tmp : "DISABLED"}</div>; };caja de arena: https://codesandbox.io/s/reactjs-lab-n791v?file=/src/labPages/Experiments/test_files/8/index.jsx