3 回答

TA貢獻1828條經驗 獲得超3個贊
將children
提供給Conditional
一個function
。要將孩子渲染為函數(渲染道具),您應該像這樣執行它
shouldRender() ? props.children() : null

TA貢獻1757條經驗 獲得超8個贊
children
是一個函數,你只需要調用children
.
一個例子:https : //codesandbox.io/s/focused-cloud-sql0d
編輯:忘了再提一件事——在你的“shouldRender”函數中,你指定了路徑但你從不使用它,因為它在你的道具中,你可以刪除它。

TA貢獻1793條經驗 獲得超6個贊
我認為問題在于您的enhancedSections.map實際上并沒有返回任何東西。
return (
<Grid container>
{enhancedSections.map((section, index) => (
<Conditional // this is line 182
path={section.conditional ? section.conditional.param_name : null }
section={section}
>
{() => {
if ( // these series of if-else statements renders perfectly without the <Conditional/> wrapper
section.style == "single_select" &&
section.section_display_name == selectedSection
) {
return (
<SingleSelect
key={section.definition.display_name}
displayName={section.definition.display_name}
description={
section.definition.description
? section.definition.description
: null
}
path={{ id: id, field: `${section.field}` }}
/>
);
} else if (
section.style == "boolean" &&
section.section_display_name == selectedSection
) {
return (
<Boolean
key={section.definition.display_name}
displayName={section.definition.display_name}
description={section.definition.description}
path={{ id: id, field: `${section.field}` }}
/>
);
} else if (
... // more conditional cmps here
)
}}
</Conditional>
))
}
</Grid>
);
這樣,enhancedSections.map 函數將返回每個增強部分的組件,并且渲染應該成功。
在添加Conditional組件之前它工作的原因是因為每個 if-else 語句都返回一個組件,并且該組件被 map 函數使用。
添加回答
舉報