es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo renderizar los controles de FluentUI en una página HTML de manera similar a cómo se renderizan los Componentes de React en una etiqueta de script dentro de un Div.

Tengo un código de muestra para invocar un Módulo de tareas de Teams, donde un archivo TypeScript se está representando en una página HTML. Enlace de Github para el ejemplo: https://github.com/nanddeepn/code-samples/tree/master/MSTeams/task-modules-tab/YouTubePlayerHTMLPage

Hay un archivo TypeScript (https://github.com/nanddeepn/code-samples/blob/master/MSTeams/task-modules-tab/YouTubePlayerHTMLPage/src/app/scripts/youTubePlayer1Tab/VideoSelectorTaskModule.tsx) y pueden representar el contenido dentro de una página HTML (https://github.com/nanddeepn/code-samples/blob/master/MSTeams/task-modules-tab/YouTubePlayerHTMLPage/src/app/web/youTubePlayer1Tab/selector.html)
No pude entender cómo logran representar el TypeScript en una página HTML.

Mi objetivo final es poder representar un TypeScript con controles FluentUI dentro de una página HTML para poder agregarlo a un Módulo de tareas con todos los controles que necesito. Cualquier ayuda será muy apreciada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para renderizar un archivo TypeScript en una página HTML, deberás transpilar el código TypeScript en código JavaScript. Esto se puede hacer utilizando herramientas como Webpack o el compilador de TypeScript.

    Al analizar la muestra de GitHub que proporcionaste, parece que están utilizando Webpack para empaquetar el código TypeScript en código JavaScript que se puede renderizar en la página HTML.

    El archivo VideoSelectorTaskModule.tsx es un archivo TypeScript que contiene componentes de React que se renderizan en la página HTML. El archivo se empaqueta y transpila a JavaScript utilizando Webpack.

    Para alcanzar tu objetivo final de renderizar un archivo TypeScript con controles FluentUI dentro de una página HTML, deberás seguir un enfoque similar. Deberás crear componentes de React utilizando TypeScript e importar componentes FluentUI en tu proyecto. Luego, utiliza una herramienta como Webpack para empaquetar y transpilar tu código TypeScript en JavaScript, que se puede renderizar en la página HTML.

    Puedes consultar la documentación de FluentUI para obtener más información sobre cómo utilizar componentes FluentUI con TypeScript y React.

Comments are closed.