Javascript React中的可点击股票代码

我已经尝试了几个小时来复制一个可点击的股票代码，就像他们在这个网站的顶端一样： 我不知道是什么触发了useEffect和长话短说，我无法想出一个解决方案，使股票行情保持移动，并提供通过箭头向前/向后点击的选项。单击箭头不应永久暂停股票代码

function Ticker() {
    const [tickerDisplay, setTickerDisplay] = useState('Free In-store Pickup')
    const [tickerIndex, setTickerIndex] = useState(0)
    const [arrowClicked, setArrowClicked] = useState(false)
    const notices = [
        'Easy Returns within 30 Days of Purchase',
        'Free Shipping on $99+ Orders',
        'Free In-store Pickup',
    ]
    const handleClick = (side) => {

        setArrowClicked(true)
        switch (side) {
            case 'left':
                setTickerIndex(
                    tickerIndex === 0 ? notices.length - 1 : tickerIndex - 1
                )
                break

            case 'right':
                setTickerIndex(
                    tickerIndex === notices.length - 1 ? 0 : tickerIndex + 1
                )
                break

            default:
                console.log('something went wrong')
                break
        }
    }
    useEffect(() => {

        if (arrowClicked) {
            setTickerDisplay(notices[tickerIndex])
            setTickerIndex(
                tickerIndex === notices.length - 1 ? 0 : tickerIndex + 1
            )
            setArrowClicked(false)
            return
        }
        setTimeout(() => {
            setTickerDisplay(notices[tickerIndex])
            setTickerIndex(
                tickerIndex === notices.length - 1 ? 0 : tickerIndex + 1
            )
            console.log('This will run every 6 seconds!')
        }, 6000)
    }, [tickerIndex, notices, tickerDisplay, arrowClicked])

    return (
        <IconContext.Provider value={{ className: 'ticker-icons-provider' }}>
            <div className='ticker'>
                <FaChevronLeft onClick={() => handleClick('left')} />
                <div className='ticker_msg-wrapper'>{tickerDisplay}</div>
                <FaChevronRight onClick={() => handleClick('right')} />
            </div>
        </IconContext.Provider>
    )
}

export default Ticker

function Ticker（）{
const[tickerDisplay，setTickerDisplay]=useState（“免费店内提货”）
常量[tickerIndex，setTickerIndex]=useState（0）
常量[arrowClicked，setArrowClicked]=useState（false）
施工通知=[
“购买后30天内轻松退货”，
“99美元以上订单免费送货”，
“店内免费接送”，
]
常量handleClick=（边）=>{
setArrowClicked（真）
开关（侧）{
案例“左”：
setTickerIndex(
tickerIndex==0？通知长度-1:tickerIndex-1
)
打破
案例“正确”：
setTickerIndex(
tickerIndex==notices.length-1？0:tickerIndex+1
)
打破
违约：
console.log（'出现问题'）
打破
}
}
useffect（（）=>{
如果（单击箭头）{
setTickerDisplay（通知[tickerIndex]）
setTickerIndex(
tickerIndex==notices.length-1？0:tickerIndex+1
)
setArrowClicked（假）
返回
}
设置超时（（）=>{
setTickerDisplay（通知[tickerIndex]）
setTickerIndex(
tickerIndex==notices.length-1？0:tickerIndex+1
)
console.log（'这将每6秒运行一次！'）
}, 6000)
}，[tickerIndex、通知、tickerDisplay、箭头单击]）
返回(
handleClick（'left'）}/>
{tickerDisplay}
handleClick（'right'）}/>
)
}
导出默认股票代码

---

编写此组件的最佳方法是什么？

这不是一件艺术品，可能有些事情本可以做得更好

希望这对你合适

const{useRef，useState，useffect}=React；
const getItems=（）=>Promise.resolve（[“我们所有的问题现在都已开放”，“答案延长：问题开放72小时”，“发布问题或获得答案”，“在2万分上获得免费徽章]）
常量代码=（{onPrevious，onNext，items，currentIndex}）=>{
const ref=useRef（null）；
常量[大小，设置大小]=使用状态({
宽度：0，
宽度px:'0px'，
高度:0,，
高度px:'0px'
})
useffect（（）=>{
如果（参考和参考当前）{
const{width，height}=ref.current.getBoundingClientRect（）；
设置大小({
宽度，
宽度px:`${width}px`，
高度，
高度：`${height}px`
})
}
}，[ref]）；
常量calculateStyleForItem=（索引）=>{
返回{
宽度：size.width，
transform:`translateX（${0}px）`
}
}
const calculateStyleForContainer=（）=>{
返回{
宽度：`${size.width*（items.length+1）}px`，
转换：`translateX（${-currentIndex*size.width+2*size.width}px）`
}
}
返回
{''}
{items.map（（值，索引）=>{value}）}
}
常量应用=（）=>{
const[items，setItems]=useState（[]）；
const[currentIndex，setCurrentIndex]=useState（0）；
const[clicked，setClicked]=useState（false）；
useffect（（）=>{
让isUnmounted=false；
getItems（）
。然后（项目=>{
如果（已卸载）{
返回
}
设置项目（项目）；
})
return（）=>{
isUnmounted=true；
}
}, [])
useffect（（）=>{
如果（！items.length）{
return（）=>{
}
}
让handle=null；
常量循环=（）=>{
如果（！单击）{
onNext（空）；
}
setClicked（false）；
handle=setTimeout（循环，2000）；
}
handle=setTimeout（循环，2000）；
return（）=>{
清除超时（句柄）；
}
}，[项目，单击]）
const onPrevious=（）=>{
setClicked（true）；
setCurrentIndex（索引=>（索引-1）>-1？索引-1:items.length-1）
}
const onNext=（以编程方式）=>{
如果（以编程方式）{
setClicked（以编程方式）；
}
setCurrentIndex（索引=>（索引+1）%items.length）
}
返回
{items.length？：'Loading'}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
html，正文{
框大小：边框框；
保证金：0；
}
.股票代码{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：黑色；
字号：1rem；
颜色：白色；
字体大小：粗体；
填充：1rem；
溢出：隐藏；
}
.ticker\u前台{
位置：绝对位置；
z指数：1；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.ticker\u值{
过渡：所有.3s都很轻松；
}
.ticker\u值{
文本对齐：居中；
显示：内联块；
垂直对齐：中间对齐；
浮动：无；
}
.阿罗{
字体大小：1.5rem；
光标：指针；
填充：1rem；
}
这不是一件艺术品，也许有些事情本可以做得更好

希望这对你合适


const{useRef，useState，useffect}=React；
const getItems=（）=>Promise.resolve（[“我们所有的问题现在都已开放”，“答案延长：问题开放72小时”，“发布问题或获得答案”，“在2万分上获得免费徽章]）
常量代码=（{onPrevious，onNext，items，currentIndex}）=>{
const ref=useRef（null）；
常量[大小，设置大小]=使用状态({
宽度：0，
宽度px:'0px'，
高度:0,，
高度px:'0px'
})
useffect（（）=>{
如果（参考和参考当前）{
常数{宽度，高度}=ref。