Javascript 反应面包屑

我正在尝试在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
    }
  }

我还尝试了内联样式：

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

然后把它写进我这行的代码里

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

{folder.name}

当我检查铬元素时，我得到

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

| Testssss

---

有谁能告诉我如何使文件夹名称显示在同一行上吗？

您应该使用

style

道具来应用内联样式，而不是按照您的代码使用

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

renderbreadcrumps=（类）=>{
const{folderPathNames}=this.state；
让项目=[]
如果（！！folderPathNames）{
items=folderPathNames.map（（文件夹，索引）=>{
报税表（
|{folder.name}
)
})
返回{items}
}
}

我为每个react组件使用样式表。无论如何，如果我按照你建议的方式使用这些样式，那也行不通。@GreatKhan2016打开chrome devtool，然后检查那些

a

的html，你在那里看到了什么<代码>样式属性是否存在？顺便说一句，什么是样式表？我的chrome调试技能非常有限。我有一个单独的表导入到组件。把它称为样式表可能是个错误的词。那么你现在明白为什么它不起作用了吗。。这里没有应用样式。。。可能

classes.rowalign

是空对象

{}

。。添加

console.log（类）

。。它在那里打印什么？当我执行console.log时，它有一个rowalign：“Index-rowalign-500”。也许我应该试着做一个内联造型？

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