React Suite é uma biblioteca de front-end popular com um conjunto de componentes React projetados para a plataforma intermediária e produtos de back-end. O componente P ortal renderiza seus filhos em uma nova subárvore fora da hierarquia DOM atual. Podemos usar a seguinte abordagem no ReactJS para usar o React Suite Portal Component.

Suporte do portal:

• filhos: é usado para denotar os subcomponentes.
• container: É usado para denotar um Container de subcomponentes de renderização.
• onRendered: é usado para denotar uma função de retorno de chamada renderizada.

Criando o aplicativo React e instalando o módulo:

• Etapa 1: crie um aplicativo React usando o seguinte comando:

  npx create-react-app foldername

   

  
  
  
  

• Etapa 2: depois de criar a pasta do projeto, ou seja , nome da pasta , mova para ela usando o seguinte comando:

  cd foldername

• Etapa 3: depois de criar o aplicativo ReactJS, instale o módulo necessário usando o seguinte comando:

  npm install rsuite

Estrutura do projeto: terá a seguinte aparência.

Estrutura do Projeto

Exemplo: Agora anote o seguinte código no arquivo App.js. Aqui, App é nosso componente padrão onde escrevemos nosso código.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Portal } from 'rsuite';
  
export default function App() {
  
  // State to handle visibility
  const [isVisible, setVisibility] = React.useState(false);
  
  // Box Ref
  const box = React.useRef(null);
  
  return (
    <div style={{ display: 'block', padding: 30, width: 500 }}>
      <h4>React Suite Portal Component</h4>
      <button type="button" onClick={() => setVisibility(!isVisible)}>
        {!isVisible ? 'Mount Children' : 'Unmount Children'}
      </button>
      <div style={{
        backgroundColor: 'yellow',
        border: '5px solid black',
      }}>
        Sample Text
        {isVisible ? (
          <Portal container={box.current}>
            <span>Your Data is Mounted here :)</span>
          </Portal>
        ) : null}
        <div style={{
          backgroundColor: 'orange',
          border: '5px solid black',
        }} ref={box} />
      </div>
    </div>
  )
}

Etapa para executar o aplicativo: execute o aplicativo usando o seguinte comando do diretório raiz do projeto:

npm start

Resultado: agora abra seu navegador e vá para http: // localhost: 3000 / , você verá a seguinte saída:

Referência: https://rsuitejs.com/components/portal/