反应中的普遍残疾财产

Question

我是新来的反应者，我发现编写短路的js条件语句来检查所有内容很麻烦。我不喜欢它嵌套在代码中的方式，也不喜欢它在大多数情况下不可读，如下所示：

{someCondition &&
    <someComponent />
}

有没有办法在反应中使用禁用的属性来制作如下所示的代码：

<someComponent disabled={!someCondition}/>

我认为这看起来更直观。有没有一种方法可以对React中的所有组件通用地实现此禁用属性？

Answer 1

您可以传递禁用的道具，但在子组件中将使用相同的条件...

您可以通过在render函数中使用if来使语法更简洁 渲染（）{ 如果（条件） 返回（...） 其他 返回（<...>）

Answer 2

我同意您的观点，该语法有点令人讨厌且难以阅读，但这是您使用React方法将其模板化为纯Javascript表达式所付出的代价。您的建议可以通过高阶组件（HOC）或挂钩来实现，使用该属性来设置display:none或类似的东西，但是它的主要缺点是：禁用仍然意味着React将不得不运行该组件逻辑，即使没有任何显示，它仍会出现在React DOM树中。您不喜欢的语法可确保完全忽略该组件。