Children

Children no React refere-se a elementos que podem ser colocados dentro de outros, sendo assim os "filhos" deles. Assim como no HTML, você pode colocar elementos dentro do seu componente no React.

Mudança no componente:

import React from 'react';

interface BoasVindasProps {
    nome: string;
    children: React.ReactNode;
}

function BoasVindas(props: BoasVindasProps) {
    return (
        <div>
            <h3>Olá, seja bem vindo {props.nome}!</h3>
            {props.children} {/* Filhos */}
        </div>
    )
}

export default BoasVindas

Mudança em App.tsx

import React from 'react';
import './App.css';

// Importa o componente que criamos de seu diretório
import Apresentacao from './components/Apresentacao/Apresentacao';
import BoasVindas from './components/BoasVindas/BoasVindas';

function App() {
  return (
    <div>
      <BoasVindas nome="Fulano">
        <p>Esse aqui é legal</p>
      </BoasVindas>

      <BoasVindas nome="Ciclano">
        <p>Esse aqui nem tanto...</p>
      </BoasVindas>
    </div>
  );
}

export default App;

Resultado:

Exemplo do uso de children