JavaScript 保护器普通 json object 同时保存到 json 文件

Question

我可以知道如何保存普通的 JSON object，同时保存到 .json 文件并以正确的方式从 json 文件中检索。

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"
        }
    ]

保留普通的 JSON object 的目的是因为我想借助 JSON object 实现完全动态的表单元素控件。

我曾尝试使用 JSON.stringify 但它转义了 onChange 键对，这使得我无法在从 my.JSON 文件中检索 onChange 键时取回它。

onChange function 不限于adjustGrid function，它可以是JS文件中定义的任何function。

渲染代码将是：

 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>
            )
        });

Answer 1

JSON

没有“JSON对象”开头，如果可以说存在这样的东西：JSON是一种用于序列化数据对象的符号语法。 按照设计，它不会序列化作为函数的 object 属性，不会区分 null 和未定义，并且无法对具有循环属性引用的对象进行编码。

JavaScript

您可以使用包含帖子中文本的 JavaScript 文件 - 这是 JavaScript 源代码，而不是 JSON。 如果您不想在脚本中创建或使用全局变量，您可以在“模块” 类型的脚本文件中使用jsonObj的导出和导入语句。 模块的缺点是它们不能使用file://协议并且必须来自服务器。

Answer 2

您无法从字符串化的 Object 获得 function。

您希望将代码保存在源代码管理中，而不是数据中，因此这样做是一种不好的做法。 此外，在数据中包含可执行代码也是一种安全隐患......

我建议提取处理程序并使用条件：

如果你有更多的处理程序，你可以创建一个选择处理程序 function，但我只是在这里内联它......

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>
    )
  });
}