Cómo agregar una declaración if-else en React para leer json-schema?
Soy muy nuevo en js y react, así que espero que alguien pueda darme una idea para este problema. Mi solución es muy mala, pero no pude encontrar una buena solución. Tampoco sé cómo agregar una declaración if-else en render. Hay 6 botones y cada botón es el nombre de un json-schema (sería mejor tener una tabla en lugar de botones, pero siempre obtengo errores con tableview).
Quiero mostrar el json-schema cuando el usuario hace clic en un botón para que el usuario pueda enviar un archivo json.
import React, { Component, useState } from 'react';
import { Row, Col } from 'react-bootstrap';
import { withTheme } from '@rjsf/core';
import schema1 from '../schemas/schema1.json';
import schema2 from '../schemas/schema2.json';
import { Datagrid, TextField, EditButton, DeleteButton } from 'react-admin';
export default class MyApp extends Component {
constructor(props) {
super(props);
this.clickme = this.clickme.bind(this);
}
ToggleGroup() {
const theme = {
blue: {
default: '#3f51b5',
hover: '#283593',
},
pink: {
default: '#000000',
hover: '#ad1457'
}
}
return (
<div>
{types.map(type => (
<col>
<col>
<button active="{active" =="=" type}="">{type}</button>
))}
<col>
<form schema="{schema1}"></form>
</div>
);
}
render() {
return (
<>
<col>
<col>
<text>
Lista de esquemas
</text>
<this.togglegroup></this.togglegroup>
);
}
}
No traduzcas el código y la salida en markdown.
davy.ai
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:
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 eventoonClick
a cada botón que llama ahandleButtonClick
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 componenteForm
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.