Question

我想在主页上显示mychart1，在联系页面上显示mychart2。我创建了2个图表，即mychart1和mychart2。现在，如何分隔两个图表，以便在主页mychart1上显示并在联系页面mychart2上显示。

代码：

import React, { Component } from 'react';

class Barchart extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){

    const data1 = {
        labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
        series: [20, 60, 120, 200, 180, 20, 10]
    }

    const options1 = {
        width:300,
        height:300,
        distributeSeries: true
    }

    const mychart1 = new Chartist.Bar('.ct-bar-chart', data1,options1);

    const data2 = {
        labels: ['A', 'S', 'B', 'C', 'D', 'E', 'F'],
        series: [120, 160, 120, 200, 180, 120, 110]
    }

    const options2 = {
        width:300,
        height:300,
        distributeSeries: true
    }

    const mychart2 = new Chartist.Bar('.ct-bar-chart', data2,options2);

  }


  render(){
    return(
         <div className="ct-bar-chart">
             {this.mychart1}
             {this.mychart2}
         </div>

    )}
}

export default Barchart ;

示例：

在家庭组件中：

<Barchart mydata1={this.props.batdata}/>

信息部分：

<Barchart mydata2={this.props.bowldata}/>

Answer 1

我建议您使用类似https://www.npmjs.com/package/react-chartjs-2（反应图表库，而不是会操纵DOM的库，而React也尝试操纵它的库）。

然后，您将可以在home和contact组件中使用单个组件。

import {Bar} from 'react-chartjs-2';

在渲染功能中，您可以添加这些

<Bar
    data={data}
    width={100}
    height={50}
    options={{
        maintainAspectRatio: false
    }}
/>

如果要坚持使用您的版本，则必须使用ID选择器（从home或contact页面作为道具传递）而不是此行中的类选择器。另外，将数据和选项作为道具传递也是这里的最佳选择。

const mychart = new Chartist.Bar(this.props.selector, this.props.data, this.props.options);

Answer 2

更新的示例显示了使用React Router来显示不同的页面（组件），从而显示不同的条形图。工作示例here。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

const PageOne = () => {
  const data = "Data One";
  return (
    <React.Fragment>
      <BarChart data={data} />
      <Link to="/two">Go to Two</Link>
    </React.Fragment>
  );
};

const PageTwo = () => {
  const data = "Data Two";

  return (
    <React.Fragment>
      <BarChart data={data} />
      <Link to="/one">Go to One</Link>
    </React.Fragment>
  );
};

const Home = () => {
  return <Link to="/one">Go to page one</Link>;
};

const BarChart = ({ data }) => {
  return <h1>BarChart of {data}</h1>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/one" component={PageOne} />
        <Route path="/two" component={PageTwo} />
      </Switch>
    </BrowserRouter>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何从单个react组件渲染不同的数据？

2 个答案: