遇到带有Reaction和语义-UI Accordion的未定义的大小侦听器 [英] Running into a '__resizeListeners__' of undefined with react and Semantic-UI accordion

问题描述

我将语义-UI Accordion用于包裹在eCharts折线图周围的Segment Reaction组件(使用echarts-for-react)。我目前有一个按钮，它允许我折叠线条图，如"折叠"变量中所示。

我还有一个按钮，允许我将组件的大小从半屏更改为全屏。

问题是，当组件已经"折叠"时，我触发了从半屏到全屏的大小调整，然后"取消折叠"组件，图表不会调整到新的容器大小。

未捕获的TypeError：无法读取的属性""sizeListeners"" 未定义

当线条图没有折叠时，调整大小会起作用。

class PlotSegmentsList extends Component {
   //no life cycle methods yet
  render() {
    const state = store.getState();
    const view = state.fullOrHalfScreen;

    const activeCategory = this.props.categories.find(p => p.category === this.props.Id);
    const activePlotsArray = activeCategory.plots;

    const plotsList = activePlotsArray.map((p) => (
      <div key={p.titles.main} className='column'>
       <Segment 
        legend={p.legend} 
        plotTitles={p.titles} 
      />
       <div className="ui divider"></div>
      </div>      
      )
    );

    return (
      <div className={view === 'half' ? "ui two column grid" : "ui one column grid"}> 
        {plotsList}
      </div>
    )
  }
}

class Segment extends Component {

  render () {    
    const state = store.getState();
    const collapsed = state.collapseOrUncollapseAll;

    return (
      <div>
        <div className="ui fluid accordion">
          <div className="title active">
            <i className="dropdown icon"></i>
              {this.props.plotTitles.main} 
          </div>
          <div className={collapsed? "content active" : "content hidden"}>
            <Toolbar plot_ID={this.props.plotTitles.main}/>
            <Plot 
              data={this.props.data}
              legend={this.props.names}
              plotType='line'
              plotTitles={this.props.plotTitles}
            />
          </div>
        </div>
      </div>

class Plot extends React.Component {

我曾尝试在组件生命周期方法中添加要绘制的事件侦听器，但我对反应和还原非常陌生，并且不确定如果组件在Accordion中折叠，如何正确更新它的大小。任何关于这个问题的建议，并使用REDUX的反应生命周期方法将是很好的！谢谢您

推荐答案

我是echarts-for-react的作者。

升级到最新版本的包，可以通过切换到element-size-listener到size-sensor来解决上面的问题。

这篇关于遇到带有Reaction和语义-UI Accordion的未定义的大小侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！