我試圖物件使用鍵和值對創建輸入欄位。我認為這將是一件輕而易舉的事，但我收到了這個錯誤。我發現沒有簡單的方法來做這件事，但這個。
import {Form, Input, Button } from 'semantic-ui-react'
const input = [{
name: 'Full Name',
dob: 'Date of Birth',
parentName: "Father's/Mother's Name",
email: "Email",
mobile: "Mobile Number",
password: "Password",
rePassword: "Re-enter Password",
aadhar: "Aadhar Number"
}]
// const inputList = ["Full Name", "Date of Birth", "Father's/Mother's Name", "Email", "Mobile Number","Password", "Re-enter Password", "Aadhar"]
let inputList = [];
for(let key in input) {
inputList.push(<Form.Field name={key} key={key} control={Input} label={input[key]} />)
}
const RegistrationForm = () => {
return(
<Form>
<Form.Field name="name" control={Input} placeholder='Full Name' label='Full Name:'/>
{
{inputList}
// inputList.map((input,index) => {
// return(<Form.Field key={index} control={Input} label={input}/>)
// })
}
</Form>
)
}
export default RegistrationForm
所以我在這里要做的是，創建一個物件，其中我的鍵是表單欄位的名稱，值是標簽。要使用它，我正在使用for回圈，但我收到了上述錯誤。如何解決這個問題？如果沒有，有沒有其他方法可以完成這項作業。
uj5u.com熱心網友回復：
您的代碼的問題在于，在渲染到 DOM 時，React 會將 JSX 轉換為 HTML DOM 元素（您可以在此處閱讀更多內容）。因此，大括號內的任何內容，React 都會假定它是期望回傳 JSX、JSX 陣列或值的嵌入式 JS 代碼。通過做{{inputList}}你想做的事情是告訴 React 用你可以在這里閱讀更多的 ES6 語法的鍵來渲染一個 JS 物件到 DOM 中，inputList這在 React 中這樣做從根本上是非法的。因此，由于您已經為回圈inputList中的每個元素創建了 JSX for，因此您可以這樣做{inputList}：
const RegistrationForm = () => {
return(
<Form>
<Form.Field name="name" control={Input} placeholder='Full Name' label='Full Name:'/>
{inputList}
</Form>
)
}另一方面，如果你不想使用for回圈，你可以做的是：
let inputList = Object.entries(input).map(([key, value]) => (<Form.Field name={key} key={key} control={Input} label={value} />));你可以在這里閱讀更多Object.entries
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/442130.html
標籤：javascript 反应 目的 下一个.js
上一篇：了解Lua中object.function(argument)和object:function(argument)之間的區別