如何在状态更改时重新渲染组件的一部分?

艾哈迈德·萨米

我有一个包含来自库 react-native-progress 的 progress.circle 的组件(参见链接:https : //github.com/oblador/react-native-progress)。

最初,我将进度圈的进度道具设置为在空闲状态下设置为 0 的状态变量,如下面的代码所示:

<Progress.Circle
        showsText={true}
        progress={this.state.progress} // this.state.progress = 0
        size={width * 0.1388888888888}
        color={"#EF5D6C"}
/>

发生用户交互次数以将状态变量 (this.state.progress) 设置为某个百分比,然后组件重新渲染以按预期显示进度动画。

问题是由于重新渲染过程,组件闪烁了部分时间。那么有没有办法只重新渲染进度圈,而将组件的其余部分保留在当前的渲染形式中。

谢恩

您可以尝试将 Progress.Circle 元素分离到一个不同的文件中,以便在它自己的渲染器中。

render() {
  return (
    <Progress.Circle
      showsText={true}
      progress={this.state.progress} // this.state.progress = 0
      size={width * 0.1388888888888}
      color={"#EF5D6C"}
    />
  )
}

这样,当您更改 state 中的元素时,只有 progress.circle 应该重新渲染。然后你将它导入你的主文件并在那里调用它:

render(){
  ....
  <ProgressCircle />
  ....
}

基本上渲染函数中的任何内容都会重新渲染。如果progress.circle 元素在状态改变的地方独立存在,据我所知,只有它应该重新渲染。

希望这在某种程度上有所帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

每次全局更改时如何访问上下文状态的一部分而不渲染?

如何从子组件仅更改状态的一部分反应钩子

如何仅更改状态的一部分?

从另一个组件重新渲染组件的一部分

如何仅渲染Sprite的一部分

如何在组件B中呈现组件A的一部分

如果仅更改组件的一部分,React会渲染该组件吗?

我如何清除状态的一部分

如何下载 React 组件的一部分?

如何在休眠状态下仅审计超类的一部分?

获取列表的一部分并在新列表更改时更改原始列表

如何在pyqt5 qwebengineview中更改html的一部分

如何在javascript中更改json obj的一部分?

Javascript在单选按钮更改时隐藏表单的一部分

是否可以仅重新渲染模板的一部分

React-Router Redirect仅渲染组件的一部分

通过react JS中的函数渲染组件的一部分

组件中仅呈现了一部分更新状态(React / Redux)

将下面渲染的精灵的一部分更改为 alpha

如何在TYPO3(vhs + flux扩展名)中仅渲染内容的一部分?

渲染网页的一部分

如何在r中重新排序和替换字符串的一部分?

如何在不重新加载整个站点的情况下替换站点的一部分?

更改geom默认外观仅作为主题组件的一部分

如何在不丢失样式的情况下打印Vue组件的一部分

如何在angularJs 1.5中将$ scope变量作为组件的templateUrl的一部分传递?

Promise 作为 redux 状态的一部分

仅重新加载iframe的一部分

反应:如何在某些特定状态更改时停止重新渲染组件?