Question

我有一个包含Tab的react组件，我想使用以下方式将选项卡项目动态加载到选项卡中一个Div，问题是我无法为每个Div分配一个ID 例如id = divPage1react ，id = divPage2react ，id = divPage3react ...

它在var id =“ divPage” + index +“ react”上显示Uncaught SyntaxError；

我认为它位于渲染器内部，因此我无法在List的map函数中初始化变量。有人可以帮忙吗？

var tabs = [
            { 'id': 1 ,'content': 1 ,'title': '1'},
            { 'id': 2 ,'content': 2 ,'title': '2'}
         ];



  class ControlledTabs extends React.Component {
          constructor(props, context) {
            super(props, context);

          }
          render() {

          const { tabs } = this.props;      
          const listTab = tabs.map((tab,index) => (

                  var id="divPage"+index+"react";  

                  <Tab  eventKey={tab.id}   title={tab.title} key={tab.id}>
                  { <div>
                      <div id=id></div>
                  </div>

                  }
                  </Tab>  
                  ))

        return (
          <Tabs>
           {listTab}
          </Tabs>
        );
      }

}

Answer 1

尝试将div函数内部的问题listTab重写为：

<div>
  <div id={id}></div>
</div>

整个功能应如下所示：

const listTab = tabs.map((tab,index) => {
    const id="divPage"+index+"react";  
    return (
        <Tab  eventKey={tab.id}   title={tab.title} key={tab.id}>
            <div>
                <div id={id}></div>
            </div>
        </Tab>  
   );
})

Answer 2

需要在map函数中使用显式的返回语法，而不是隐式的返回

const listTab = tabs.map((tab,index) => { // note the use of curly braces

    var id="divPage"+index+"react";  
    // using an explicit return here
    return (
          <Tab  eventKey={tab.id}   title={tab.title} key={tab.id}>
               {<div>
                      <div id={id}></div>
                </div>}
           </Tab>  
     )
})

React Redux-Cant在List的map函数中初始化一个变量

2 个答案: