Entiendo que es posible que queramos usar el portal de reacción cuando intentemos agregar un componente fuera del árbol de jerarquía renderizado en reaccionar como ejemplo si queremos que aparezca el componente del modelo sobre cualquier otra cosa en la página.
pero lo que no puedo entender completamente es por qué no ponemos este componente Modelo en el mismo árbol de jerarquía pero en la parte superior y hacemos que la representación dependa de una variable que obtenemos del contexto de reacción o redux
function App(){ const showModel ; //variable we get from redux or react context return (<> {showModel? </Model>:""} <div id="main"></> </>) }Estás bien. Estrictamente hablando, es posible que nunca tenga que usar portales si puede administrar el estilo necesario para que el otro componente se represente en el lugar adecuado. Pero los portales pueden hacerlo mucho más fácil: con ellos, el estilo existente para el otro contenedor y todo lo que lo rodea seguirá funcionando cuando su componente se inserte en el interior, con un ajuste mínimo o nulo de su parte. Poniendo el modal justo al lado de su otro código React (en términos de la jerarquía DOM), como
<Model /> <div id="main" /> puede funcionar , pero bien podría requerir una lógica algo complicada si la posición visual deseada para el Modal es la misma que un elemento ya existente en el DOM. Los portales a veces lo harán mucho más fácil. (Y a veces no ayudarán en absoluto, como cuando el <Model /> no necesita colocarse en relación con un elemento existente)