Reactjs I'；我试图动态创建react.vis LineSeries，但LineSeries是在</svg>；而且是空的

我正试图改变我的图表，这样他们可以迭代并将任意数量的当前系列数据加载到它的图表中。我决定使用this.props.children，但是

插入到svg的末尾，即使在浏览器中检查html/js时

{this.props.children}

在

中

我是否采取了错误的方法，我对react（14天）和react vis（6天）都非常陌生，是否有修复方法或更好的方法

<>注意，代码处于重构/转换的中间，所以有一点复制< /p> 我附上了一张图像，显示了线条系列的插入位置

我已经尝试将

代码更改为

，并考虑了一个没有

{this.props.children}

的迭代器，但我还没有完全适应处理重复元素的react方法

我试图避免在大量条件渲染中要求n个数据集，因为这似乎是错误的方法，除非这是唯一的方法

class ProtoListView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      results: [],
    }
  }

  componentDidMount() {

  }

  render() {
    const { classes } = this.props;
    let listItems = [];

    if (this.props.ready === 1) {
      this.props.recordset.forEach((element, key) => {
        listItems.push(element)
      });
      return listItems.map(e =>
        <React.Fragment>
          <Container className={classes.title}><Typography align="center" color="secondary" className={classes.charts} >{e.title}</Typography></Container>
          <ProtoTeleChart data={e} ready={this.props.ready} >
            <ProtoTeleChartSeries data={e} />
          </ProtoTeleChart>
        </React.Fragment>
      );
    }
    return listItems;
  }
}

ProtoListView.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ProtoListView);


class ProtoTeleChart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      lineSeries: [],
    } 
  }

  render() {
    if (this.props.ready === 1) {

      let dataArr = [];
      let min = this.props.data.labels.yAxis.range["min"]; 
      let max = this.props.data.labels.yAxis.range["max"];
      let keys = Object.keys(this.props.data.labels.attribs);

      keys.forEach((k) => {
        dataArr = this.props.data.attribs.map((d) => {     

          return {
            x: d.index,
            y: d[k],
          }    
        })
        this.state.lineSeries.push(dataArr);
      });
      /* LineSeries is included to show where it should generate the child*/
      return (
        <XYPlot  yDomain={[min,max]}  height={300} width={800}>      
          <HorizontalGridLines />
          <XAxis  title={this.props.data.labels.xAxis.label} />
          <YAxis  title={this.props.data.labels.yAxis.label} />

          <LineSeries  style={{ stroke: 'violet', strokeWidth: 2 }} data={this.state.lineSeries[0]} />
          {this.props.children}      
        </XYPlot>
      )
    return "";
  }
}
}
export default ProtoTeleChart

class ProtoTeleChartSeries extends Component {
  constructor(props) {
    super(props)
    this.state = {
      results : [],
    } 
  }

  render() {


      let dataArr = [];
      let lineSeries = [];
      let min = this.props.data.labels.yAxis.range["min"]; 
      let max = this.props.data.labels.yAxis.range["max"];
      let keys = Object.keys(this.props.data.labels.attribs);


      keys.forEach((k) => {
        dataArr = this.props.data.attribs.map((d) => {     

          return {
            x: d.index,
            y: d[k],        
          }    
        })

        lineSeries.push(dataArr);
    })

    return (    
      <React.Fragment>
            <LineSeries  style={{ stroke: 'violet', strokeWidth: 2 }} data={lineSeries[1]} />
          </React.Fragment>
      )
    }
  }

export default ProtoTeleChartSeries

类ProtoListView扩展组件{
建造师（道具）{
超级（道具）
此.state={
结果：[]，
}
}
componentDidMount（）{
}
render（）{
const{classes}=this.props；
让listItems=[]；
if（this.props.ready==1）{
this.props.recordset.forEach（（元素，键）=>{
listItems.push（元素）
});
返回listItems.map（e=>
{e.title}
);
}
返回列表项；
}
}
ProtoListView.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（ProtoListView）；
类ProtoTeleChart扩展组件{
建造师（道具）{
超级（道具）
此.state={
线条系列：[]，
} 
}
render（）{
if（this.props.ready==1）{
设dataArr=[]；
让min=this.props.data.labels.yAxis.range[“min”]；
设max=this.props.data.labels.yAxis.range[“max”]；
让keys=Object.keys（this.props.data.labels.attribs）；
键。forEach（（k）=>{
dataArr=this.props.data.attribs.map（（d）=>{
返回{
x:d.index，
y:d[k]，
}    
})
this.state.lineSeries.push（dataArr）；
});
/*包含LineSeries以显示生成子对象的位置*/
返回(
{this.props.children}
)
返回“”；
}
}
}
导出默认协议
类prototype系列扩展组件{
建造师（道具）{
超级（道具）
此.state={
结果：[]，
} 
}
render（）{
设dataArr=[]；
设lineSeries=[]；
让min=this.props.data.labels.yAxis.range[“min”]；
设max=this.props.data.labels.yAxis.range[“max”]；
让keys=Object.keys（this.props.data.labels.attribs）；
键。forEach（（k）=>{
dataArr=this.props.data.attribs.map（（d）=>{
返回{
x:d.index，
y:d[k]，
}    
})
lineSeries.push（数据阵列）；
})
报税表（
)
}
}
导出默认协议系列

我附上了该图像，以显示数据集为空且位于错误的位置，并且我进行了检查，以确保在将数据传递到中时在子LineSeries中正确接收数据

我认为数据为空可能是一个范围问题，但我认为它被排除在svg之外是错误使用了react-vis库

未加载图像，因此liink为url: