javascript - react : Render parent component only if children will render

Question

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

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

现在，如果所有子图表都没有权限，我被要求隐藏父选项卡，即如果没有一个子图表呈现，则完全隐藏该选项卡。

现在，我想在 React 中正确执行此操作，因此我知道数据应该从父级流向子级 - 父级应决定子级是否渲染。但权限 ID 附加到每个子图表 - 我需要获取每个权限，检查它们并仅在授权对子图表的任何访问时才进行渲染。但这样的话，数据不是从子级流向父级吗？

非常感谢任何类型的正确方向的刺激。

Answer 1

这是我的看法:

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

所以您的问题的解决方案如下。遵循此流程

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

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 组件中处理图表数据。