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组件中处理chartData。

React：仅在子项将呈现时呈现父组件

1 个答案: