reactjs - 使用“内容”属性时组件不重新渲染（react-insta-stories）

Question

我正在尝试使用react-insta-stories. 我正在使用该content属性来显示故事。我正在尝试更改 handleclick() 中变量的值。这里有 2 个链接：链接 1 链接 2。我正在尝试通过更改showViewers. 我可以看到组件不断地重新渲染，直到故事的进展结束。showViewers问题是当我在故事的进展结束后更改变量的值时，组件没有重新渲染。

{
 content: ({ action, isPaused }) => {
     const handleClick = (e) => {
         showViewers = !showViewers;
         console.log(showViewers);
     };
     return (
        <div onClick={handleClick} className={'story-wrap'}>    
        <img src={require('./img.png')} alt='' className={'story-img'}/>
        {console.log(showViewers)}      //logging value of variable
        {showViewers ? (
            <div className={'viewed-by-list-wrap'}>
                {viewedBy.map((user, index) => (
                    <div className={'viewed-by-list-item'} key={index}>
                     <img src={user.avatar} alt='' />
                        <div className={'user-name'}>
                             <p>{user.name}</p>
                            <p>{user.time}</p>
                        </div>
                    </div>
                ))}
            </div>
        ) : null} 
        <div className={'see-more'} onClick={() => handleClick}>Viewed</div>
        </div>
     );
    },
    header: {
             heading: '_sudo_',
             subheading: 'Posted 32m ago',
             profileImage: require('./img.png') }
}

一旦进度结束并且组件停止渲染，则调用该函数并更改变量的值，但上述组件未渲染。

我尝试保持showViwers组件的内部状态。但是每次状态更新时，故事进度都会从头开始更新。

是否有任何其他逻辑来执行此功能？

Answer 1

<div onClick={handleClick} className={'story-wrap'}>    
        <img src={require('./img.png')} alt='' className={'story-img'}/>
        {console.log(showViewers)}      //logging value of variable
        {showViewers ? (
            <div className={'viewed-by-list-wrap'}>
                {viewedBy.map((user, index) => (
                    <div className={'viewed-by-list-item'} key={index}>
                     <img src={user.avatar} alt='' />
                        <div className={'user-name'}>
                             <p>{user.name}</p>
                            <p>{user.time}</p>
                        </div>
                    </div>
                ))}
            </div>
        ) : null} 
        <div className={'see-more'} onClick={() => handleClick}>Viewed</div>
        </div>

您的 onClick 处理程序不起作用将 z-index 的高值放在外部 div 中，即在您的案例故事包装中。

.story-wrap{
  z-index: 100000;
}