我有一個元素的介面：
export interface iElm {
name?: string;
appearance?: string;
atomic_mass?: number;
boil?: number;
category?: string;
density?: number;
discovered_by?: string;
melt?: number;
molar_heat?: number;
named_by?: string;
number?: number;
period?: number;
phase?: string;
source?: string;
spectral_img?: string;
summary?: string;
symbol?: string;
xpos?: number;
ypos?: number;
shells?: number[];
electron_configuration?: string;
electron_configuration_semantic?: string;
electron_affinity?: number;
electronegativity_pauling?: number;
ionization_energies?: number[];
cpk_hex?: string;
}
我通過使用類似于此問題（json to ts）中的實用程式得到了這個：如何將 json 轉換為 typescript 介面？
我正在使用的 json 是元素物件的物件，它們都有點不同，但看起來像這樣：
"helium": {
"name": "Helium",
"appearance": "colorless gas, exhibiting a red-orange glow when placed in a high-voltage electric field",
"atomic_mass": 4.0026022,
"boil": 4.222,
"category": "noble gas",
"density": 0.1786,
"discovered_by": "Pierre Janssen",
"melt": 0.95,
"molar_heat": null,
"named_by": null,
"number": 2,
"period": 1,
"phase": "Gas",
"source": "https://en.wikipedia.org/wiki/Helium",
"spectral_img": "https://en.wikipedia.org/wiki/File:Helium_spectrum.jpg",
"summary": "Helium is a chemical element with symbol He and atomic number 2. It is a colorless, odorless, tasteless, non-toxic, inert, monatomic gas that heads the noble gas group in the periodic table. Its boiling and melting points are the lowest among all the elements.",
"symbol": "He",
"xpos": 18,
"ypos": 1,
"shells": [2],
"electron_configuration": "1s2",
"electron_configuration_semantic": "1s2",
"electron_affinity": -48,
"electronegativity_pauling": null,
"ionization_energies": [2372.3, 5250.5],
"cpk_hex": "d9ffff"
}
如您所見，一切都與 iElm 界面一致（屬性是可選的，因為有一些奇怪的角落案例元素）
現在這是我的問題：我有一個接收 iElm 的 React 函陣列件：
const Element: FC<iElm> = (props) => {
// some jsx stuff with the data
}
我可以像這樣將 json 的屬性傳遞給 Element：
<Element name={table.boron.name}/>
但是是否有一些解決方法，這樣我就不必逐個檢查每個屬性并復制它？
uj5u.com熱心網友回復：
您可以簡單地使用擴展運算子將整個物件傳入：
<Element {...table.boron} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431226.html
下一篇：將自定義有效負載按鈕鏈接到意圖