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