React内联条件组件属性

Question

我到处找，找不到我问题的答案。所以我想要一个只在特定条件下显示的条件属性，例如：

<Button {this.state.view === 'default' && 'active'}></Button>

如您所见，我只想在this.state.view等于默认值时指示按钮处于活动状态。然而，我得到了意想不到的令牌，错误...

但当我尝试将属性放在前面时，例如：

<Button isActive={this.state.view === 'default' && 'active'}></Button>

它传递语法错误并显示良好，但这不是我想要实现的。

我怎样才能解决这个问题？它没有通过的原因是什么？

因此，我刚刚发现在react bootstrap中，属性active是active=true的缩写，因此我使用

<Button active={this.state.view === 'default'}></Button>

所以如果有人遇到这个问题，我就把它留在这里。但是，我仍然想知道为什么条件属性失败而没有将其封闭在类似道具的语法中，例如：

这：

active={this.state.view === 'default'}

对

{this.state.view === 'default' && 'active'}

Answer 1

在JSX中，组件属性（或道具）编译为一个普通的JavaScript对象。道具名称用作对象的键，道具值存储在这些键下。来自JSX文档的第一个示例很好地演示了这一点。在你的情况下{view==='default'

但是，如果花括号内的表达式计算为对象，JSX将通过原始语法接受道具。例如，您可以执行{{active： view==="默认"}}。在这种情况下，JSX可以从提供的对象中获取它需要的键和值，因此不需要active=。

Answer 2

事实上，我想这是一个重复的问题，我回答了这个链接有时前。对于这篇特定文章，布尔值不需要condition prop，因为它的工作原理如下：

const { booleanValue } = this.props;
return (
    <input checked={booleanValue} />
);

或者创建自己的布尔值：

const booleanValue = someThing === someOtherThing;
return (
    <input checked={booleanValue} />
);

它们都工作得很好，因为当booleanValue为false时，反应不会看到activeprop，因此它不存在，除非您将检查的prop传递给特定组件组件将从this.props接收错误检查的prop。

但是，如果你想在你的特定组件上有一个带有条件的道具，如果条件返回false，你不想要它，有两种方法，我喜欢第二种：

第一：

<Component someProp={condition ? yourValue : undefined} />

第二：

<Component {...(condition && { someProp: yourValue })} />

Answer 3

首先，JSX只是React.createElement的语法糖。因此，它可能看起来像，但实际上，您没有指定html属性：事实上，您总是传递道具。

例如，JSX代码

也就是说，我们有JSX转置一个没有值为true的prop（检查文档）。例如：

但是，我们知道HTML5规范不接受属性=true（如这里所指出的）。例如：

因此，要将HTML元素呈现给DOM，React只考虑有效的属性的道具（如果不是，则不呈现属性）。检查所有支持的html属性。最后，如果它是一个布尔属性，它会删除真/假值，并正确地进行渲染。

例如：

但是<代码>

我这么说只是为了澄清你的情况。

您正试图将一个active道具传递给按钮组件（第一个大写字母表示这是一个React组件：代码中的某个地方处理了一个名为按钮的React组件）。

这意味着：

<代码>

和

<代码>

同样的事情！

因此，如果你想做一个有条件的道具，你可以简单地做这样的事情：

<Button active={this.state.view === 'default'}></Button>

括号内有一个条件。这意味着，如果您的this.state.view等于default（true），active道具将以true值向下传递到组件。如果不相等，则使用false值。

按钮组件必须以某种方式处理此活动道具。它可以呈现按钮元素，例如，更改其样式，传递已禁用的属性。。。我制作了一把小提琴来证明这一点：https://jsfiddle.net/mrlew/5rsx40gu/