reactjs - 如何在 React js 中渲染多个“vis-react”组件

Question

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

标签： reactjsreact-reduxreact-router

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>
            )
        }