Question

我需要在运行中生成包含dygraphs的div。但是使用下面的代码，我在编译时从dygraphs得到了可怕的不存在的div错误。如果我硬编码“Chart_0”如图所示（div ID和dygraph目标）一切正常。

如何正确计时？我不知道在编译时需要多少div和图表，这必须在运行时决定。

通过代码中的console.log（）语句，在javascript控制台中我看到：

render() chart = Chart_0
PlotCharts.js:32 componentDidMount() chart = Chart_0

所以div正在按照计划在 dygraph之前创建并。我错过了什么？

class PlotCharts extends Component {

  componentDidMount = () => {

    var ordered = {};
    Object.keys(this.props.plots.charts).sort().forEach((key) => {
      ordered[key] = this.props.plots.charts[key];
    });

    for ( let chart in ordered ) {
      // chart = Chart_0, Chart_1, etc.
      console.log("componentDidMount() chart = " + chart);
      let sigList = Object.keys(this.props.plots.charts[chart]);
      sigList.forEach((signal) => {
        let localData = this.props.plots.charts[chart][signal];
        new Dygraph (
          chart, // Chart_0
          localData,
          {
            labels: ["MessageTime", signal],
            axes: {
              x: {
                axisLabelFormatter: function(ms) {
                  let d = new Date(ms);
                  let hour = d.getUTCHours();
                  let mins = d.getUTCMinutes();
                  let secs = d.getUTCSeconds();
                  let msec = d.getUTCMilliseconds();

                  return hour + ":" + mins + ":" + secs + "." + msec;
                }
              }
            }
          }
        )
      });
    }
  }

  render() {

    var plots = [];

    let chartList = Object.keys(this.props.plots.charts).sort();

    for ( let chart in chartList ) {
      console.log("render() chart = " + chartList[chart]);
      plots.push(
        <div
          id={chart}  // Chart_0
          key={chartList[chart]}
        >
        </div>
      );
    }

    return (
      <div>
        { plots }
      </div>
    )

  }

}

Answer 1

我无法在这个主题的任何地方找到工作代码，但我提出了一个相当简单的答案/布局。似乎是一个足够普遍的问题所以我发布了它here。如果你来这里寻找同一个问题的答案，那可能有所帮助。

该代码与上述问题中的代码类似。答案可能就在反应组件生命周期的油腻肮脏的地鼠内心深处，不确定。

生成的div ID不存在div错误

1 个答案: