reactjs - 如何在 React JS 中制作水平滚动条,例如 Google 的那种?
问题描述
在 react js 中问这个问题的最简单方法是什么?如何使用此code.see
图像预期输出制作滚动条?*[ https://i.stack.imgur.com/nex4t.png][1]
import React from 'react';
import ScrollContainer from "react-indiana-drag-scroll";
import './App.css';
const list = new Array(15).fill(1).map((_, index) => index + 1);
const Arrow = ({ text, className }) => {
return <div className={className}>{text}</div>;
};
class Nav extends React.Component{
render(){
return(
<div className="Head">
<div className="Filters">
Filters
</div>
<div className="categories">
<ScrollContainer className="pn-ProductNav">
<div className="pn-ProductNav_Contents ">
{list.map(el => (
<a href="googl.com" className="pn-ProductNav_Link" >
<div className="inner" key={el}>
Chairs
</div>
</a>
))}
</div>
</ScrollContainer>
</div>
</div>
);
}
}
export default Nav;
解决方案
推荐阅读
- java - Java 正则表达式:自定义 URL
- android - ConscryptEngine 数据读取问题:无法解析 TLS 数据包标头
- docker - 无法使用 System.InvalidOperationException 启动 Kestrel:无法配置 HTTPS 端点
- ruby - 实例变量不在方法之间共享
- jquery - 如何在事件侦听器中覆盖事件阻止默认值?
- javascript - for循环向jQuery中的多个输入字段添加点击功能没有按预期工作
- bootstrap-4 - Bootstrap Tour 未开始
- flutter - 如何摆脱颤动中的appbar和tabbar之间的空间?
- reactjs - 在 Material UI DateTimePicker 中禁用过去一小时
- jsp - 如何拆分两个参数并根据它们创建标签和输入字段