lucky-canvas icon indicating copy to clipboard operation
lucky-canvas copied to clipboard

无法动态的修改 activeStyle 的 background 并即时生效

Open NateRobinson opened this issue 2 years ago • 4 comments

  • 你当前是什么框架(必填):react
  • 你使用的是哪个包(必填):@lucky-canvas/react
  • 你当前插件的版本(必填):^0.1.13
  • 当前环境是小程序还是浏览器(选填):浏览器
  • 详细描述你的bug:无法动态的修改 activeStyle 的 background
  • 问题代码(重要):
// 代码开始, 别再放歪了行吗
<LuckyGrid
    ref={myLucky}
    width="400px"
    height="400px"
    blocks={blocks}
    prizes={prizes.map((item) => ({ ...item, background: blockColor }))}
    buttons={buttons}
    defaultStyle={defaultStyle}
    activeStyle={{ background: activeBlockColor }}
    onStart={() => {
      myLucky.current.play();
      setTimeout(() => {
        // eslint-disable-next-line no-bitwise
        myLucky.current.stop(0);
      }, 1000);
    }}
    onEnd={() => {
      // 抽奖结束会触发end回调
    }}
  />
// 代码结束

NateRobinson avatar Aug 23 '23 09:08 NateRobinson

代码不对, 自己检查, 不是bug

buuing avatar Aug 23 '23 09:08 buuing

@buuing 帮忙指正一下?

NateRobinson avatar Aug 23 '23 16:08 NateRobinson

activeStyle={{ background: activeBlockColor }}不能这么用吧. 这样搞, 你是不是得给抽奖组件加个key, 每次修改之后, 重新渲染一次组件

buuing avatar Aug 25 '23 01:08 buuing

@buuing 明白,不过上面的 prizes,buttons,defaultStyle 这些这么用是可以实时生效的。我先试试加上 key 让重新渲染试试效果。

NateRobinson avatar Aug 25 '23 01:08 NateRobinson