代码之家 › 专栏 › 技术社区 › stone rock

如何从单个React组件呈现不同的数据?

reactjs javascript

stone rock · 技术社区 · 6 年前

我想展示一下 mychart1 在主页和 mychart2 在联系人页面上。我创建了两个图表,即 我的图表1 和 我的图表2 .现在,我如何将两个图表分开,以便在主页上 我的图表1 显示在“联系人”页上 我的图表2 显示。

代码:

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

2 回复 | 直到 6 年前

Jonathan Hamel 6 年前

我建议你用像 https://www.npmjs.com/package/react-chartjs-2 (一个react图表库,而不是一个在react试图操作DOM的库)。

然后您就可以使用其中的单个组件 home 和 contact 组件。

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

在渲染函数中,可以添加这些

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

如果你想坚持使用你的版本,你必须使用一个ID选择器(从你的 家 或 接触 page)而不是此行中的类选择器。此外,将数据和选项作为道具传递也是最好的选择。

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

-1

Colin Ricardo 6 年前

更新的示例显示使用React路由器显示不同的页面(组件),从而显示不同的条形图。工作示例 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);