繁体   English   中英

Cobalt中未根据组件的状态更改对React组件进行更新

[英]React component isn't updated in Cobalt on component's state change

我正在使用React为Cobalt创建一个小型应用程序。 到目前为止,一切看起来都很不错,只有一件事:我无法根据组件的状态更改重新渲染一小段HTML。 我在屏幕的左侧有一个菜单,在屏幕的右侧有相关的组件/ HTML。 当我更改菜单中的选项时,我希望相应的组件/ HTML得到相应的更新。 想象一下,我有7个菜单选项。 对于所有其他人,除了第五名,我只想显示选项文本。 渲染方法中的代码如下所示:

this.state.selectedOption === 'fifthOption'
            ? <FifthComponent />
            : (
              <div className="wrapper">
                  <span className="title">{this.state.selectedOption}</span>
              </div>)

在Chrome中,一切正常,但在Cobalt中,由于某种原因,当我从第一选项切换到第二,第三,第四选项时-没有任何变化,并且显示了第一选项的文本。 但是,当我从第5个选项切换到第4个或第6个选项时,它已更改。 控制台中没有错误。 因此,看起来它不会在状态更改时重新渲染“包装器”(但会启动render方法)。

我试图将不同的类添加到“ div”中,使其作为“ switch”构造,使该“ div”作为单独的组件-所有这些都没有运气。

任何帮助将非常感激。

这是一个肮脏的hack,然后是一个真正的答案,但是我通过更改element的标签解决了该问题。 因此render方法的代码如下:

switch (this.state.selectedOption) {
  case 'fifthOption':
    return <FifthComponent />;
   /*use span instead of div in every odd option,
     so they mixed up "span - div - span - div" and so on*/
  case 'firstOption': // 
  case 'thirdOption':
    return (
      <span className="wrapper">
        <span className="title">{this.state.selectedOption}</span>
      </span>);
  default:
    return (
      <div className="wrapper">
        <span className="title">{this.state.selectedOption}</span>
      </div>);
}

因此,每个下一项与按元素的标记都不同于上一项。 可能只有当Cobalt看到新标签时,它才会重新渲染元素。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM