我正在尝试在我的 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>
谁能告诉我如何使文件夹名称出现在同一行?
最佳答案
您应该使用 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>
}
}
关于javascript - react 面包屑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52318787/