javascript - react 面包屑

Question

我正在尝试在我的 React 项目中实现面包屑布局。我没有使用 router4 来呈现 URL。此时面包屑出现的样子。

Home
|Test Update
|Testssss
|Test11111

我希望将它们全部放在一条线上。

home|Test Update|Testssss|Test11111

这是我的代码。

renderBreadCrumbs=(classes)=>{
    const {folderPathNames } = this.state;
    
    let items =[]
    if(!!folderPathNames){
      items = folderPathNames.map((folder,index)=>{
        return <div  key={index}>
        <a className={classes.rowalign} 
          onClick={this.handleFolderDestination}
          data-folder={folder.id}>|{folder.name}
        </a>
        </div>
      })
      return items
    }
  }

我试图通过使用 display-inline 使所有组件都在同一行，但它没有用。

  styles:
    rowalign:{
      display: 'inline-block'
    }

我也试过做内联样式:

const divStyle = {
  display: 'inline-block'
};

并将其放入我的代码中这一行

<a style={divStyle} 
   onClick={this.handleFolderDestination}
   data-folder={folder.id}>
   {folder.name}
</a>

当我检查 chrome 中的元素时，我得到了

<a data-folder="206" style="display: inline-block;">|Testssss</a>

谁能告诉我如何使文件夹名称出现在同一行？

Answer 1

您应该使用 style Prop 来应用内联样式，而不是根据您的代码使用 className。注意 div 应该在所有 a 之外作为它们的容器。

将你的代码写成:

renderBreadCrumbs=(classes)=>{
    const {folderPathNames } = this.state;

    let items =[]
    if(!!folderPathNames){
      items = folderPathNames.map((folder,index)=>{
        return ( 
        <a style={divStyle} 
           key={index}
           onClick={this.handleFolderDestination}
           data-folder={folder.id}>|{folder.name}
        </a>
        )
      })
      return <div>{items}</div>
    }
  }