Javascript 在React中，如何在render（）运行之前将元素放入DOM？

我正在使用React（与Rails一起）和一个名为AnyChart的图表库。但是，渲染中的AnyChart代码会自动查找要将图表附加到的

元素。如果我将图表代码与container div一起放在render中，那么它会给出一个错误，因为图表代码找不到div，因为它还不在DOM上

我试着用谷歌搜索，只找到了一些关于门户网站和参考文献的东西，这些东西似乎不适用于我的问题

我知道我可以将container div移动到布局视图模板，但我希望能够在图表下方的组件上呈现其他内容。这是我的整个StockContainer组件和InputField组件：

从“React”导入React；
从“../components/InputField”导入InputField
类StockContainer扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
股票代码：“”
}
this.handleStockTickerChange=this.handleStockTickerChange.bind（this）；
this.handleClearForm=this.handleClearForm.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleClearForm（事件）{
event.preventDefault（）；
这是我的国家({
股票代码：“”
});
}
handleStockTickerChange（事件）{
this.setState（{stockTicker:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
让主体={
符号：this.state.stockTicker
}
log（“获取股票数据：”+body.symbol）
此.handleClearForm（事件）；
}
componentDidMount（）{
}
render（）{
var表、映射、图表；
table=anychart.data.table（）；
表1.addData([
['2015-12-25', 512.53, 514.88, 505.69, 507.34],
['2015-12-26', 511.83, 514.98, 505.59, 506.23],
['2015-12-27', 511.22, 515.30, 505.49, 506.47],
…稍后将从API导入的示例数据
['2016-01-07', 510.93, 516.07, 506.00, 510.99],
['2016-01-08', 510.88, 515.93, 505.22, 509.95],
['2016-01-09', 509.12, 515.97, 505.15, 510.12],
['2016-01-10', 508.53, 516.13, 505.66, 510.42]
]);
//映射数据
mapping=table.mapAs（）；
addField（'open'，1'，first'）；
addField（'high'，2'，max'）；
mapping.addField（'low'，3'，min'）；
addField（'close'，4'，last'）；
addField（'value'，4'，last'）；
//定义图表类型
chart=anychart.stock（）；
//设置系列类型
图表。绘图（0）。ohlc（映射）。名称（‘ACME公司’）；
//设置图表标题
图表标题（“任何股票演示”）；
//显示图表
图表.集装箱（“集装箱”）；
chart.draw（）；
返回(
研究/添加股票
)
}
}
导出默认StockContainer；
从“React”导入React；
常量输入字段=（道具）=>{
返回(
{props.label}
)
}
导出默认输入字段

与上面评论中提到的Ishwor一样，您是否尝试过将

chart.container（）

和

chart.draw（）

方法移动到组件的

componentDidMount（）

钩子中

如果您可以提供组件的其余代码，我们可能会提供帮助

import React from 'react';
import InputField from '../components/InputField'

class StockContainer extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      stockTicker: ''
    }

    let table = anychart.data.table();
    table.addData([
    ['2015-12-25', 512.53, 514.88, 505.69, 507.34],
    ['2015-12-26', 511.83, 514.98, 505.59, 506.23],
    ['2015-12-27', 511.22, 515.30, 505.49, 506.47],

    ...sample data that will later be imported from an API
    ]);

    // mapping the data
    let mapping = table.mapAs();
    mapping.addField('open', 1, 'first');
    mapping.addField('high', 2, 'max');
    mapping.addField('low', 3, 'min');
    mapping.addField('close', 4, 'last');
    mapping.addField('value', 4, 'last');

    // defining the chart type
    let chart = anychart.stock();

    // set the series type
    chart.plot(0).ohlc(mapping).name('ACME Corp.');

    // setting the chart title
    chart.title('AnyStock Demo');

    // to be able to reference these later, if needed
    this.table = table;
    this.mapping = mapping;
    this.chart = chart;

    this.handleStockTickerChange = this.handleStockTickerChange.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

    // draw the chart
    this.drawMyAwesomeChart = this.drawMyAwesomeChart.bind(this);
  }

  componentDidMount() {
    this.chart.container('container');
    this.drawMyAwesomeChart()
  }

  componentDidUpdate() {
    // do some checks here to see if you need to draw chart?
    // this.drawMyAwesomeChart()
  }

  drawMyAwesomeChart() {
    this.chart.draw();
  }

}

---

然后，您可以绑定一个函数，该函数专门负责在股票代码更改时刷新图表。我还没有完全测试过这一点，但是按照这些思路应该可以工作？

尝试使用生命周期方法componentDidUpdate

我让它正常工作。这是我的密码：

从“React”导入React；
从“../components/InputField”导入InputField
常量divStyle={
//宽度：“100%”，
//身高：“100%”
};
类StockContainer扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
股票代码：“”，
当前价格：[]，
节目：假
}
this.handleStockTickerChange=this.handleStockTickerChange.bind（this）；
this.handleClearForm=this.handleClearForm.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.getDataForStockChart=this.getDataForStockChart.bind（this）；
}
handleClearForm（事件）{
//event.preventDefault（）；
this.setState（{stockTicker:''}）；
}
handleStockTickerChange（事件）{
this.setState（{stockTicker:event.target.value}）；
}
getDataForStockChart（）{
让arrayOfArrays=[]
取回(`https://api.iextrading.com/1.0/stock/${this.state.stockTicker}/chart/1y`）
。然后（响应=>{
if（response.ok）{
返回响应；
}否则{
让errorMessage=`${response.status}（${response.statusText}）`，
错误=新错误（错误消息）；
抛出（错误）；
}
})
.then（response=>response.json（））
。然后（body=>{
body.forEach（obj=>{
arrayOfArrays.push（[obj[“日期”]、obj[“打开”]、obj[“高”]、obj[“低”]、obj[“关闭”]）；
});
这是我的国家({
秀：没错，
当前价格：arrayOfArrays
});
})
.catch（error=>console.error（`error-in-fetch:${error.message}`））；
}
componentDidUpdate（prevProps、prevState）{
var表、映射、图表；
if（this.state.currentPrices.length>1&&this.state.show）{
this.refs.myInput.innerHTML=''；
//node=this.myRef.current
table=anychart.data.table（）；
表.addData（此.state.currentPrices）；
mapping=table.mapAs（）；
addField（'open'，1'，first'）；
addField（'high'，2'，max'）；
mapping.addField（'low'，3'，min'）；
addField（'close'，4'，last'）；
addField（'value'，4'，last'）；
chart=anychart.stock（）；
图表。绘图（0）。ohlc（映射）。名称（“股票图表”）；
图表标题（“任何股票演示”）；
图表.集装箱（“集装箱”）；
chart.draw（）；
this.setState（{show:false}）
此.handleClearForm（事件）；
}
}
//shouldComponentUpdate（下一步，下一步状态）{
//if（this.state.show）
// }
哈