Question

我正在使用Total.js Flow，并且试图修改现有代码以能够动态更改组件颜色。例如，使用“设备”部分中的“光”组件，当灯打开时，我希望将组件的颜色更改为浅蓝色，比方说，当灯关闭时，我希望将颜色更改为红灯。这只是为了帮助您直观地看到灯光的开/关状态。

通过反复试验，我成功地知道了什么时候开灯或关灯。从那里，使用简单的if / else语句，我能够找到如何更改颜色，但是仅当我重新加载整个页面时，它才有效。我注意到通读各种SO帖子，有一个热重载函数（FLOW.reload（）），但这似乎没有按预期工作。当灯光打开/关闭时，如何动态更改组件的颜色？

var status = () => 
{
        instance.status('Light is: ' + (device.on ? 'On' : 'Off'));
    instance.dashboard('status', device);
    instance.flowboard('status', device);

    // if device is on change label and block color
    if (device.on.toString() == 'true')
    {
        this.state.color = 'blue';   // changes the label color
        instance.color = '#FFFFFF';  // changes color of block              

    }
    else    // if device is off
    {
        this.state.color = 'red';   // changes the label color
        instance.color = '#BB0000'; // changes color of block           
    }
};

Answer 1

您的code没问题，但是您需要执行instance.reconfig()方法，该方法将有关更改通知所有客户端/流设计器。我们不建议在短时间内调用instance.reconfig()函数，因为它太昂贵了。

如何在Total.js Flow中动态更改组件颜色

1 个答案: