Javascript 谷歌甘特图未更新高度

我正在使用谷歌甘特图的react组件。图表数据是组件状态的一部分，我正在根据用户操作对其进行更新。我正在根据行数计算甘特图高度，并将其作为

高度

道具传递

<Chart
      chartType="Gantt"
      data={[columns, ...this.state.data_rows]}
      width="100%"
      height={(this.state.data_rows.length + 1) * 42}
      legendToggle
    />

不幸的是，似乎考虑了对

chartData

道具的更新，但高度没有更新

我构建了一个沙箱来展示这一点：

---

如果单击“添加行”按钮，将添加一行，但高度保持不变。如何使甘特图根据需要增长？

您应该尝试更新SVG高度； 我修改了代码，以便在添加行时动态获取

height

，并设置

SVG height

类应用程序扩展了React.Component{
状态={
数据行：[
[
“研究”，
“查找来源”，
新日期（2015年0月1日），
新日期（2015年0月5日），
无效的
100,
无效的
],
[
“写”，
“写纸”，
无效的
新日期（2015年0月9日），
daystoms（3），
25,
研究、大纲
],
[
“引用”，
“创建参考书目”，
无效的
新日期（2015年0月7日），
daystoms（1），
20,
“研究”
],
[
“完成”，
“交纸”，
无效的
新日期（2015年10月0日），
daystoms（1），
0,
引用，写
],
[
“大纲”，
“大纲文件”，
无效的
新日期（2015年0月6日），
daystoms（1），
100,
“研究”
]
]
};
onAddRow（）{
让newState=Object.assign（{}，this.state）；
newState.data\u rows.push([
“任务”+newState.data\u rows.length，
“一些新任务”，
无效的
新日期（2015年0月6日），
daystoms（1），
100,
“研究”
]);
这个.data_rows++；
this.setState（newState）；
}
getHeight（）{
if（document.getElementsByTagName（“svg”）[0]）{
文件
.getElementsByTagName（“svg”）[0]
.setAttribute（“高度”，（this.state.data_rows.length+1）*42）；
文件
.getElementsByTagName（“svg”）[1]
.setAttribute（“高度”，（this.state.data_rows.length+1）*42）；
}
返回（this.state.data_rows.length+1）*42；
}
render（）{
返回(
这是.onAddRow（）}
>
添加行
);
}
}

谢谢您的回答！不幸的是，由于onAddRow（）中的更改，它在Firefox中不起作用。然而，如果你删除了它，它也可以在Firefox中使用。你能在我接受之前更新吗？

class App extends React.Component {
  state = {
    data_rows: [
      [
        "Research",
        "Find sources",
        new Date(2015, 0, 1),
        new Date(2015, 0, 5),
        null,
        100,
        null
      ],
      [
        "Write",
        "Write paper",
        null,
        new Date(2015, 0, 9),
        daysToMilliseconds(3),
        25,
        "Research,Outline"
      ],
      [
        "Cite",
        "Create bibliography",
        null,
        new Date(2015, 0, 7),
        daysToMilliseconds(1),
        20,
        "Research"
      ],
      [
        "Complete",
        "Hand in paper",
        null,
        new Date(2015, 0, 10),
        daysToMilliseconds(1),
        0,
        "Cite,Write"
      ],
      [
        "Outline",
        "Outline paper",
        null,
        new Date(2015, 0, 6),
        daysToMilliseconds(1),
        100,
        "Research"
      ]
    ]
  };

  onAddRow() {
    let newState = Object.assign({}, this.state);
    newState.data_rows.push([
      "Task" + newState.data_rows.length,
      "Some new task",
      null,
      new Date(2015, 0, 6),
      daysToMilliseconds(1),
      100,
      "Research"
    ]);
    this.data_rows++;
    this.setState(newState);
  }

  getHeight() {
    if (document.getElementsByTagName("svg")[0]) {
      document
        .getElementsByTagName("svg")[0]
        .setAttribute("height", (this.state.data_rows.length + 1) * 42);
      document
        .getElementsByTagName("svg")[1]
        .setAttribute("height", (this.state.data_rows.length + 1) * 42);
    }

    return (this.state.data_rows.length + 1) * 42;
  }

  render() {
    return (
      <div className="App">
        <span
          style={{ backgroundColor: "#0f0", cursor: "pointer" }}
          onClick={() => this.onAddRow()}
        >
          add row
          </span>
        <div id="chart_div">
          <Chart
            chartType="Gantt"
            data={[columns, ...this.state.data_rows]}
            width="100%"
            height={this.getHeight()}
            legendToggle
          />
        </div>
        <div>

        </div>
      </div>
    );
  }
}