reactjs - 在 Map Loop 中使用 PivotItem 的 Fabric UI

Question

我正在尝试将 PivotItems 动态添加到 Fabric UI Pivot。

return (
    <div>
         <PrimaryButton style={{margin:5 }} onClick={addItem}>
            Add
        </PrimaryButton>
        <Pivot aria-label="My Items">
         
        {items.map((item)=>{
            
            return (
            <div key={uniqueId}>
                <PivotItem headerText="test">
                    Test
                </PivotItem>     
            </div>)
        })}
        </Pivot>
    </div>
)

但这些项目没有呈现。当我删除所有 Pivot/item-stuff 并打印出一些文本时，它工作正常......

Answer 1

好的，我终于在这里找到了问题。在我使用的地图功能内部

<div key...

但是这段代码在一个<pivot>只允许<PivotItem>作为孩子的里面......

所以我像这样修复它并且它有效：

return (
<div>
     <PrimaryButton style={{margin:5 }} onClick={addItem}>
        Add
    </PrimaryButton>
    <Pivot aria-label="My Items">
     
    {items.map((item)=>{
        
        return (           
            <PivotItem headerText="test" key={uniqueId}>
                Test
            </PivotItem>     
       )
    })}
    </Pivot>
</div>

)