[英]Rendering Component Returned Component Completely In React
我正在創建一個應用程序,我需要多次渲染一個表單元素,並更改一些變量名稱。 不幸的是,我遇到了一些問題,即並非所有代碼都從組件返回。 我去掉了一些變量聲明,以便於閱讀。
主要成分
export default function StrengthLog() {
return (
<Container id="strengthContainer">
<SelectMovements />
<Form>
{
movement.map(movement => {
const checked = movement[1].triggered
if (checked){
return <StrengthForm props={movement}/>
}
})
}
<Button content='submit'>Submit</Button>
</Form>
</Container>
)
}
組件被退回
export default function StrengthForm({props}) {
return (
<div>
<h1>Hello!</h1>
{
props[1].triggered
? (
setsArray.map(item => {
return <Group widths='equal'>
<Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
<Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
<Button className="addSet">+</Button>
<Button className="deleteSet">x</Button>
</Group>
})
)
: console.log('Thing')
}
</div>
)
}
發生的事情是它返回了StrengthForm
的<h1>
但它沒有返回大括號中包含的其他信息。
問題是我將setsArray
聲明為const setsArray = new Array(props[1].sets)
這在控制台中給了我StrengthForm.js:9 (4) [empty × 4]
。 我懷疑是因為數組實際上沒有我需要在那里添加一些內容的內容,所以我評論了我的初始聲明並改為這樣做。
const setsArray = (() => {
const emptyArray = []
for(let i = 0; i <= props[1].sets; i++) {
emptyArray.push(' ');
}
return emptyArray;
})();
return (
<div>
<h1>Hello!</h1>
{
props[1].triggered
? (
setsArray.map(() => {
return <>
<Group widths='equal'>
<Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
<Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
<Button className="addSet">+</Button>
<Button className="deleteSet">x</Button>
</Group>
</>
})
)
: console.log('Thing')
}
</div>
)
我把它改成這個后,一切都彈出了!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.