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

Posted 2023-02-15

【中文标题】使用“内容”属性时组件不重新渲染（react-insta-stories）

【英文标题】：Component not re-rendering when using 'content' property (react-insta-stories)

【发布时间】：2020-04-23 16:38:39

【问题描述】：

我正在尝试使用react-insta-stories 创建故事。我正在使用content 属性来显示故事。我正在尝试更改 handleclick() 中变量的值。这里有 2 个链接：link 1link 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 保持在组件的状态中。但是每次状态更新时，故事进度都会从头开始更新。

还有其他逻辑可以做这个功能吗？

【问题讨论】：

请贴出该组件的完整代码

是showViewers 状态吗？只有当你改变 state 的值时，组件才会重新渲染。喜欢this.setState(showViewers : !this.state.showViewers)

我已经用更多代码编辑了这个问题。请看一下。

@Kais 我试过了。但同样的问题仍然存在。此外，由于组件重新渲染，故事进度也会更新。 IE。当我声明更新时，故事从一开始就显示出来了。

【参考方案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;