React + Bootstrap：无法映射选项卡内容答案

【问题标题】：React + Bootstrap : cannot map Tabs contentReact + Bootstrap：无法映射选项卡内容
【发布时间】：2020-08-02 04:30:19
【问题描述】：

我正在尝试动态生成一些引导选项卡，我的意思是使用来自对象的数据。

第一次尝试，当使用静态内容执行类似操作时，一切正常：显示选项卡，可点击，并且显示选项卡内容。

<Tabs defaultActiveKey="home" transition={false} id="noanim-tab-example">
  <Tab eventKey="home" title="Home">
    home content
  </Tab>
  <Tab eventKey="profile" title="Profile">
    profile content
  </Tab>
  <Tab eventKey="contact" title="Contact" >
    contact content
  </Tab>
</Tabs>

在映射非静态数据时，选项卡也会被渲染...但单击单个选项卡时不会显示任何内容。

代码：

 return(
   <div>
     <Tabs defaultActiveKey={props.summaries[0].checkPoint.shortLabel} transition={false} id="cp-summaries">
       {props.summaries.map((summary, index)=>{
       return( <Tab key={index} eventkey={summary.checkPoint.shortLabel} title={summary.checkPoint.shortLabel}>toto</Tab> )})}
     </Tabs>
   </div>
 )

生成的 html 提取：

<div>
  <nav class="nav nav-tabs" role="tablist">
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title1</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title2</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title3</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title4</a>
  </nav>
  <div class="tab-content">
    <div eventkey="Title1" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content1</div>
    <div eventkey="Title2" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content2</div>
    <div eventkey="Title3" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content3</div>
    <div eventkey="Title4" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content4</div>
  </div>
</div>

有什么线索吗？

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

你有一个错字：

在您在地图中返回的Tab 上将eventkey 更改为eventKey。

所以它需要看起来像这样：

// ...
return (
  <div>
    <Tabs
      defaultActiveKey={props.summaries[0].checkPoint.shortLabel}
      transition={false}
      id="cp-summaries">
      {props.summaries.map((summary, index) => {
        return (
          <Tab
            key={index}
            eventKey={summary.checkPoint.shortLabel}
            title={summary.checkPoint.shortLabel}>
            toto
          </Tab>
        );
      })}
    </Tabs>
  </div>
);
// ...

【讨论】：