Cómo agregar una declaración if-else en React para leer json-schema?

Answer

1. 

   davy.ai

   July 13, 2023 at 4:45 pm

   Solución para mostrar json-schema al hacer clic en un botón utilizando React

   Para mostrar json-schema cuando un usuario hace clic en un botón, podemos crear un componente de grupo de alternancia que contenga los botones para cada nombre de json-schema. Luego, podemos agregar un controlador de eventos a cada botón que establezca el estado del esquema activo de nuestra aplicación en el nombre del esquema relacionado con el botón. Finalmente, podemos usar este estado de esquema activo en nuestro método de renderizado para renderizar condicionalmente el json-schema en función del botón que se hizo clic.

   Aquí está cómo podemos modificar el código para lograr esto:

   import React, { Component } from 'react';
   import { Row, Col, Button } from 'react-bootstrap';
   import { withTheme } from '@rjsf/core';
   import schema1 from '../schemas/schema1.json';
   import schema2 from '../schemas/schema2.json';
   import Form from '@rjsf/bootstrap-4';
   
   class MyApp extends Component {
     constructor(props) {
       super(props);
       this.state = { activeSchema: null };
       this.handleButtonClick = this.handleButtonClick.bind(this);
     }
   
     handleButtonClick(schemaName) {
       this.setState({ activeSchema: schemaName });
     }
   
     toggleGroup() {
       const schemaNames = ['schema1', 'schema2'];
   
       return (
         <div>
           {schemaNames.map((schemaName) => (
             <col>
               <button active="{this.state.activeSchema" =="=" schemaname}="" onclick="{()" ==""> this.handleButtonClick(schemaName)}
               >
                 {schemaName}
               </button>
   
           ))}
         </div>
       );
     }
   
     render() {
       const activeSchema = this.state.activeSchema;
       let schema = null;
       if (activeSchema === 'schema1') {
         schema = schema1;
       } else if (activeSchema === 'schema2') {
         schema = schema2;
       }
   
       return (
         <>
           <col>
             <col>
               <text>Lista de esquemas</text>
   
   
           {this.toggleGroup()}
           {schema && (
             <col>
               <form schema="{schema}"></form>
   
           )}
   
       );
     }
   }
   
   export default MyApp;
   

   Primero, establecemos el estado inicial de nuestra aplicación con un valor de activeSchema nulo. También agregamos un método de controlador de eventos, handleButtonClick, que recibe un argumento de schemaName y establece el estado activeSchema en ese nombre.

   A continuación, modificamos nuestro método toggleGroup para recorrer la matriz de nombres de esquemas y crear un botón para cada uno. También agregamos un evento onClick a cada botón que llama a handleButtonClick con el valor de schemaName correspondiente.

   En nuestro método de renderizado, primero verificamos el estado de activeSchema para determinar qué esquema, si alguno, se debe mostrar. Usamos una simple declaración if-else para establecer la variable schema en el objeto de json-schema correspondiente en función del botón que se hizo clic.

   Finalmente, renderizamos condicionalmente el json-schema utilizando la variable schema y el componente Form de la biblioteca @rjsf/bootstrap-4.

   Espero que esto te ayude a resolver tu problema. Hazme saber si tienes alguna pregunta o si hay algo más en lo que pueda ayudarte.

Comments are closed.