Javascript 如何从单个组件呈现不同的数据？

我想在主页上显示

mychart1

，在联系人页面上显示

mychart2

。我已经创建了两个图表，即

mychart1

和

mychart2

。现在，我如何将两个图表分开，以便在主页上显示mychart1，在联系人页面上显示mychart2

代码：

import React，{Component}来自'React'；
类条形图扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
常量数据1={
标签：['XS'，'S'，'M'，'L'，'XL'，'XXL'，'XXXL']，
系列：[20,60,120,200,180,20,10]
}
常量选项1={
宽度：300，
身高：300，
分销商：对
}
const mychart1=新图表列表.Bar（'.ct条形图'，数据1，选项1）；
常数数据2={
标签：['A'，'S'，'B'，'C'，'D'，'E'，'F']，
系列：[120160120200180120110]
}
常量选项2={
宽度：300，
身高：300，
分销商：对
}
const mychart2=新图表列表.Bar（'.ct条形图'，数据2，选项2）；
}
render（）{
返回(
{this.mychart1}
{this.mychart2}
)}
}
导出默认条形图；

例如：

内部组件：

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

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

在信息组件中：

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

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

---

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

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Switch，Route，Link}；
常量第一页=（）=>{
const data=“数据一”；
返回(
到两点
);
};
常量第二页=（）=>{
const data=“数据二”；
返回(
去一家
);
};
常量Home=（）=>{
返回第一页；
};
常量条形图=（{data}）=>{
返回{data}的条形图；
};
常量应用=（）=>{
返回(
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我建议您使用类似（react图表库，而不是在react尝试操作DOM时操作DOM的库）

然后，您将能够在

主页

和

联系人

组件中使用单个组件

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

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

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

---

只需在主页和联系人页面组件中包含？如果你想获得不同的数据，就必须使用道具或图表将订阅的某种可观察的服务。你使用的是react路由器吗？@Colin不，我没有使用react路由器，正如@JonathanHamel提到的，这似乎很简单——你能展示更多的代码或解释更多你想做的事情吗？@JonathanHamel检查我更新的代码。如果你（OP）愿意重新考虑你的整体方法，这是一个很好的长期解决方案，在将来更可能防止出现问题，并且在以后需要其他图表时更具模块化。我希望在不同页面上显示具有不同数据的饼图。您的示例在单个页面上显示两个图表Op没有询问如何将数据作为道具传递，并且在示例中已经这样做了。相反，问题是如何只显示所需的图表。@223塞内卡OP的原始问题似乎显示了一些基本的误解，因此OP在传递道具时，他们做得不正确。有人能解释一下反对票，以便我改进我的答案吗？

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