React:仅当子组件将渲染时才渲染父组件

React: Render parent component only if children will render

本文关键字：组件 React      更新时间：2023-09-26

我对如何在React中处理这种情况感到困惑。

我在一组选项卡中有一些图表组件。图表是否呈现取决于其权限道具。我们检查用户是否有权访问该图表，如果没有，则不进行渲染。很简单。

现在，我被要求在没有子图表具有权限的情况下隐藏父选项卡，即如果没有子图表进行渲染，则完全隐藏选项卡。

现在，我想在React中正确地做到这一点，这样我就明白了数据应该从父级流到子级——父级应该决定子级是否渲染。但权限ID附在每个儿童图表上——我需要获得每个权限，检查它们，只有在授权访问儿童的情况下才能呈现。但那样的话，数据不是从孩子流向父母吗？

非常感谢任何朝着正确方向的鞭策。

这是我的看法：

根据React原则，您的数据应该从父级流向子级。你的父母应该是聪明的组成部分，做出决定，而孩子应该永远是愚蠢的。

因此，你的问题的解决方案如下。遵循此流程

以下是您的数据应遵循的层次结构：

TABGROUP -> TAB(s) -> CHART(s)

每个选项卡都应该包含一个要渲染的图表列表。每个图表都应该采用适当的道具进行渲染。

现在，在将要呈现的图表列表发送到每个选项卡之前，您应该检查是否允许绘制至少一个图表。

让我们考虑一下您的数据存储返回JSON（如果没有，您可以将数据重组为类似的原理）。您应该在渲染之前获取数据（通过维护状态，如果您不确定该做什么，可以查找一些AJAX示例）。

var data = {
  'tab1': [
    {
       'id': 'chart1',
       'permission': true,
       'data': { ... }
    },
    ...
  ],
  'tab2': [
    {
       'id': 'chartn',
       'permission': false,
       'data': { ... }
    },
    ...
  ],
  ...
}

现在让我们试着如下过滤数据，

for (var tab in data) {
  data[tab] = data[tab].map(function(chart) {
     return chart.permission === true;
  });
  if (data[tab].length < 1) {
    delete data[tab];
  }
}

现在我们已经过滤了数据，让我们呈现我们的组件，

// the variable was "data"
<TabGroup>
  {
     Object.keys(data).map(function(tab, i) {
       // tab is a list
       return <Tab key={i} charts={tab} />;
     })
  }
</TabGroup>

现在在您的Tab组件中，

// incoming prop was charts, so in your render function
<div>
  this.props.charts.map(function(chart, i) {
    // chart is a JSON object as above
    return <Chart key={i} chartData={chart} />;
  });
</div>

最终，您可以在Chart组件中处理chartData。

相关文章：