在 Map Loop 中使用 PivotItem 的 Fabric UI

问题描述

我正在尝试将 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 并打印出一些文本时，它工作正常......

解决方法

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

<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>

)