Reactjs 重用子组件'；实例'；跨多个父母

我目前正在使用React和D3构建仪表板。我希望将每个仪表板组合为它们自己的组件（而不是让一个大型组件管理所有内容），但在每个仪表板中重复使用子组件，这将允许平滑的动画和转换

下面是一个非常粗略的例子，说明了我正在努力实现的目标

const Dashboard1 = () => {
  const data = useData('/main');
  return <ChartComponent data={data}/>;
};
const SubDashboard = () => {
  const data = useData('/sub');
  return <ChartComponent data={data}/>;
};
const App = (props) => {
  return props.topLevel ? <TopDashboard/> : <SubDashboard/>;
};

const仪表盘1=（）=>{
const data=useData（'/main'）；
返回；
};
常量子仪表板=（）=>{
const data=useData（'/sub'）；
返回；
};
常量应用=（道具）=>{
返回道具。顶级？：；
};

我发现这种方法存在的问题是，

在每个仪表板之间导航时会取消装载和重新装载（因为父级不同），这会导致页面闪烁，并重新绘制所有视觉效果，这对于某些更复杂的视觉效果来说是非常昂贵的。我希望在每个渲染之间的两个仪表板上使用相同的

实例，这样它就不会卸载，获得传递到其中的新数据，并可以从以前的值设置为新值的动画

---

有没有方法或模式可以实现这一点？

您需要一个父项来存储所有数据并将其传递给子组件，但我建议使用redux来实现这一点

const Dashboard1 = (props) => {
  return <ChartComponent data={props.data.main}/>;
};
const SubDashboard = (props) => {
  return <ChartComponent data={props.data.sub}/>;
};
const App = (props) => (
  // this should be load elsewhere, store in redux and use it here once loaded
  const data = {
    main: useData('/main')
    sub: useData('/sub'),
  };
  return props.topLevel ? <TopDashboard data={data} /> : <SubDashboard data={data} />;
};

const仪表盘1=（道具）=>{
返回；
};
常量子仪表板=（道具）=>{
返回；
};
常量应用=（道具）=>(
//这应该加载到其他地方，存储在redux中，加载后在此处使用
常数数据={
main:useData（“/main”）
sub:useData（'/sub'），
};
返回道具。顶级？：；
};

您需要一个父项来存储所有数据并将其传递给子组件，但我建议使用redux来实现这一点

const Dashboard1 = (props) => {
  return <ChartComponent data={props.data.main}/>;
};
const SubDashboard = (props) => {
  return <ChartComponent data={props.data.sub}/>;
};
const App = (props) => (
  // this should be load elsewhere, store in redux and use it here once loaded
  const data = {
    main: useData('/main')
    sub: useData('/sub'),
  };
  return props.topLevel ? <TopDashboard data={data} /> : <SubDashboard data={data} />;
};

const仪表盘1=（道具）=>{
返回；
};
常量子仪表板=（道具）=>{
返回；
};
常量应用=（道具）=>(
//这应该加载到其他地方，存储在redux中，加载后在此处使用
常数数据={
main:useData（“/main”）
sub:useData（'/sub'），
};
返回道具。顶级？：；
};

这并不能解决问题。由于父组件更改，ChartComponent仍将卸载和重新装载。这并不能解决问题。由于父组件更改，ChartComponent仍将卸载和重新装载。