使用“content”属性时组件未重新呈现(react-insta-stories)

Question

我正在尝试使用react-insta-stories创建故事。我使用content属性来显示故事。我正在尝试更改handleclick()中的一个变量的值。这里有两个链接：link 1 link 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索引值放在外部div中，即在您的案例故事包装中。

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