¿Puedo saber cómo puedo conservar el objeto JSON simple mientras lo guardo en el archivo .json y lo recupero del archivo json de la manera adecuada?
const jsonObj = [ { min:1, max:4, defaultValue:3, width:"100%", label:"Column", onChange:(evt) => adjustGrid("col", evt), type:"InputNumber" }, { min:1, max:4, defaultValue:1, width:"100%", label:"Row", onChange:(evt) => adjustGrid("row", evt), type:"InputNumber" } ]La intención de preservar el objeto JSON simple es porque quiero lograr controles de elementos de formulario completamente dinámicos con la ayuda del objeto JSON.
Intenté usar JSON.stringify pero se escapa del par de claves onChange, lo que hace que no pueda recuperar la clave onChange cuando la recupero de mi archivo .JSON.
la función onChange no está restringida para la función de ajuste de cuadrícula, puede ser cualquier función que se haya definido en el archivo JS.
El código de renderizado será:
return jsonObj.map((v) => { return ( <Form.Item label={v.type}> <InputNumber min={v.defaultValue} max={v.max} defaultValue={v.defaultValue} {...v} width={v.width} /> </Form.Item> ) });JSON
No hay un "Objeto JSON" para empezar, si se puede decir que tal cosa existe: JSON es una sintaxis de notación para serializar objetos de datos. Por diseño, no serializa las propiedades de los objetos que son funciones, no distingue entre nulos e indefinidos y no puede codificar objetos con referencias de propiedades cíclicas.
JavaScript
Puede usar un archivo JavaScript que contenga el texto en la publicación, que es el código fuente de JavaScript y no JSON de todos modos. Si no desea crear o utilizar variables globales en el script, puede usar instrucciones de exportación e importación para jsonObj desde archivos de script de tipo "módulo". La desventaja de los módulos es que no están disponibles mediante el protocolo file:// y deben provenir de un servidor.
No puede obtener una función de un objeto en cadena.
Desea mantener el código en el control de código fuente, no en los datos, por lo que es una mala práctica hacerlo. Además, es un peligro para la seguridad tener un código ejecutable en los datos...
Sugiero extraer los controladores y usar un condicional:
Si tiene más controladores, puede crear una función de controlador de elección, pero simplemente la alineé aquí...
const InputItem = ()=>{ const rowHandler = (evt) => adjustGrid("row", evt) const colHandler = (evt) => adjustGrid("col", evt) return jsonObj.map((v) => { return ( <Form.Item label={v.type}> <InputNumber //...other properties onChange = {v.label == "Column" ? colHandler : rowHandler} /> </Form.Item> ) }); }