Question

我正在使用Semantic反应组件的Semantic-UI手风琴包裹eCharts线图（使用echarts-for-react）。我目前有一个按钮，允许我折叠线图，如“折叠”变量中所示。

我还有一个按钮，可以让我将组件的大小从半屏改为全屏。

问题是当组件已经“折叠”并且我触发从半屏幕调整到全屏幕然后“解除”组件时，图表不会调整大小到新的容器大小。

未捕获的TypeError：无法读取属性' resizeListeners '的未定义

当线图未折叠时，调整大小确实有效。

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 {

我曾尝试在组件lifeCycle方法中向Plot添加事件侦听器，但我很反应和redux并且不确定如果在手风琴中折叠时如何正确更新此组件大小。关于这个问题的任何建议以及使用redux的反应生命周期方法都会很棒！谢谢

Answer 1

我是echarts-for-react的作者。

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

使用react和Semantic-UI手风琴

1 个答案: