2

我正在尝试更改我的图表，以便它们迭代并将任意数量的当前系列数据加载到 react-vis 中的图表中。我决定使用 this.props.children，但是在<LineSeries />svg 末尾之后插入，即使在检查浏览器{this.props.children}内</XYPlot>的 html/js 时在里面

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

请注意，代码处于重构/转换的中间，因此有一些复制

我附上了一张图片来显示 LineSeries 的插入位置

我已经尝试将<React.Fragment>代码更改为<>，并考虑了一个没有 的迭代器{this.props.children}，但我还没有完全适应处理重复元素的反应方式。

我试图避免在大量条件渲染中要求 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

我附上了图片以显示数据集既是空的又在错误的位置，并且我已经检查以确保在将数据传递到子 LineSeries 时正确接收到数据

我认为数据为空可能是范围问题，但我认为它被排除在 svg 之外是对 react-vis 库的误用。

图片未加载，因此链接为 url： https ://drive.google.com/open?id=0B-kqm_hXFyf5UXpia3pWMjUxblhnRGF4aDUwdlZmSnVSQXdv

4

0 回答 0