如何在React JS中呈现多个“可见反应”组件

Question

我想使用React js使用vis-react组件呈现多个拓扑。
任何建议如何进行？ 我正在使用ES6

Answer 1

如果您有一个数组想要用其项目填充图表数据，则可以执行此操作

    render() {
        let counter = 0;
        const items= this.props.data.map(item => {
            return (
                <XYPlot
                    width={300}
                    height={300}>
                    <HorizontalGridLines />
                    <LineSeries data={[item.data]}/>
                    <XAxis />
                    <YAxis />
                </XYPlot>
                )
            })

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

如果您还有其他来源，则必须像这样手动设置它：

  render() {
      return (
          <XYPlot key='1'
              width={300}
              height={300}>
                  <HorizontalGridLines />
                  <LineSeries
                      data={[
                        {x: 1, y: 10},
                        {x: 2, y: 5},
                        {x: 3, y: 15}
                      ]}/>
                  <XAxis />
                  <YAxis />
            </XYPlot>

            <XYPlot key = '2'
               width={300}
               height={300}>
               <HorizontalGridLines />
               <LineSeries
                   data={[
                      {x: 1, y: 10},
                      {x: 2, y: 5},
                      {x: 3, y: 15}
                   ]}/>
              <XAxis />
              <YAxis />
            </XYPlot>
            )
        }