Question

正在显示我的每个标签和标签面板；但是，没有渲染家具组件。我尝试实施此方法时是否存在重大问题？

    <Tabs defaultActiveKey={Object.keys(this.state.fTypes)[1]} transition={false} >
    {Object.keys(this.state.fTypes).map((key, value)=>{
      const furniturePieces = Object.keys(this.state.fTypes[key]);
      return(
        <Tab eventKey={key} title={key} style={{width: '100%', height: '100px', backgroundColor: 'grey' }}>
        {this.renderTabDisplay(furniturePieces, key)}
        </Tab>
      )
    })}
  </Tabs>

    renderTabDisplay(furnPieces, key){
furnPieces.map((piece, info)=>{
  const furniturePiece = this.state.fTypes[key][piece];
  return(
    <Furniture
    furniture={furniturePiece}
    inGrid={false}
    conversion={0}
    />
  )
})

}

Answer 1

您不是从renderTabDisplay返回的。请向函数添加返回。

renderTabDisplay(furnPieces, key){
  return furnPieces.map((piece, info)=>{
  const furniturePiece = this.state.fTypes[key][piece];
  return(
    <Furniture
    furniture={furniturePiece}
    inGrid={false}
    conversion={0}
    />
  )
})
}

Answer 2

经过下面的代码后，我可以看到您没有返回任何内容。

//添加了返回值，并且可以正常工作。

renderTabDisplay(furnPieces, key){
return furnPieces.map((piece, info)=>{
  const furniturePiece = this.state.fTypes[key][piece];
  return(
    <Furniture
    furniture={furniturePiece}
    inGrid={false}
    conversion={0}
    />
  )
})

快乐编码：）

React组件未在Bootstrap选项卡中呈现

2 个答案: