Tengo el siguiente código que estoy tratando de refactorizar.
const [edit, setEdit] = useState(false); <ListItemText primary={edit ? <TextareaAutosize ... /> : <Typography ..../>} /> TextareaAutosize repite mucho a través de la aplicación, así que pensé en convertirlo en un componente separado.
export default function Textarea(props) { const [edit, setEdit] = useState(false); if(edit){ return( <TextareaAutosize .../> ) } return false } Como puede ver, si la edit es falsa, el componente devuelve falso. La parte de atrás en la parte superior pensé que haría esto
import Textarea from "../Textarea"; <ListItemText primary={Textarea ? <Textarea ... /> : <Typography ..../>} /> Según mi lógica, debería haber una manera de verificar si el componente Textarea devolverá falso, ¿verdad?
Un "componente" (JSX) es un elemento de interfaz de usuario. Debe devolver JSX o nulo, y el motor de representación renderizará el JSX devuelto o nada si es nulo.
Puede verificar una bandera y un cortocircuito:
{isFlag && <MyComponent ... />}o hacer que el componente se represente o no (o si desea mantener el estado, simplemente muestre/oculte):
<MyComponent isVisible={isFlag} />O es posible devolver diferentes componentes dependiendo de las banderas:
if (isLoading) { return <MyLoadingSkeletonComponent /> } <MyMainUIComponent />EDITAR: es posible que desee refactorizar en un componente compuesto donde toma la bandera y oculta la lógica mostrar/ocultar dentro de ella
const TextArea = ({edit, editMode, viewMode}) => ( edit ? editMode : viewMode ) // Call it with the flag and both components: <TextArea edit={edit} editMode={<TextareaAutosize ... />} viewMode={<Typography ... />} />Tenga lo mejor de los dos mundos, su idea de refactorización es correcta, pero le falta algo.
prueba algo como esto:
export default function Textarea(props) { props.edit ? <TextareaAutosize .../> : <Typography ..../> }y
<ListItemText primary=<TextareaAutosize {edit} ... /> />En este caso, tiene un lugar para cambiar los códigos TextareaAutosize y Typography, código menos desordenado en la lista principal.
Espero que esto ayude.