Question

我到处搜寻，无法找到问题的答案。所以我想要一个仅在某些条件下显示的条件属性，例如：

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

正如您所看到的，如果this.state.view等于默认值，我只想指示按钮活动。但是，我得到Unexpected token, error...

但是当我尝试在它之前放置一个属性时，例如：

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

它传递语法错误并显示正常，但这不是我想要达到的目的。

我该如何解决这个问题？这可能是它没有通过的原因？

更新

所以我发现在react-bootstrap中，active属性是active=true的缩写，所以我用

解决了它

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

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

此：

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

对战

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

Answer 1

首先，JSX只是React.createElement的语法糖。所以，可能看起来像，但实际上，你没有指定html attributes ：事实上，你总是在传递{{1} }。

例如，JSX代码props被转换为<input type="button" value="My button" />。并且，必要时，React引擎将此React.createElement('input',{type:'button',value:'My Button'})作为HTML元素呈现给DOM。

尽管如此，我们知道JSX将React Element转换为没有值为 true （检查docs）。例如：prop已转换为<Button active></Button>。

但是，我们知道HTML5规范不接受 React.createElement(Button, { active: true });（如指向here）。例如：attribute=true无效。正确的是<button disabled=true></button>。

因此，要将HTML元素呈现给DOM，React只会考虑有效<button disabled></button>的{{1}}（如果没有，则不会呈现该属性）。检查all supported html attributes。然后，最后，如果它是一个布尔属性，它将删除 true / false 值，并正确呈现它。

例如：props被转换为attributes，然后React呈现给DOM <button active={true}></button>，因为{{1}的HTML规范中没有React.createElement("button", { active: true });属性标签（不在受支持的属性列表中）。

但<button></button>已转换为active，而React呈现给DOM <button/>。

我刚才说要澄清你的情况。

您尝试将<button disabled={true}></button>道具传递给React.createElement("button", { disabled: true });组件（首字母大写意味着＆＃39;一个React组件：有一个名为<button disabled></button>的React组件处理代码中的某个地方。）

这意味着：

active已转换为Button

和

Button已转换为<Button active></Button>

同样的事情！

所以，如果你想做一个有条件的React.createElement(Button, { active: true });，你可以简单地这样做：

<Button active={true}></Button>

括号内有条件。表示如果您的React.createElement(Button, { active: true });等于prop（true），<Button active={this.state.view === 'default'}></Button>道具将被传递给具有this.state.view值的组件。如果不相等，则为default值。

然后，

active组件必须处理此true道具。它可以呈现false元素，例如，改变它的风格，传递Button道具......我创造了一个小提琴来证明这一点：https://jsfiddle.net/mrlew/5rsx40gu/

Answer 2

实际上，我想这是一个重复的问题，有时我在this link中回答过。对于此特定帖子，不需要条件道具来获取布尔值，因为它的工作原理如下：

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

或设置您自己的布尔值：

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

它们两者都工作良好，因为当booleanValue为false时，react看不到active道具，因此除非您通过，否则它不存在。 checked支持特定组件，该组件将从this.props接收错误的检查支持。

但是，如果您想在带有条件的特定组件上安装道具，并且如果条件返回false，则您不希望它有两种方式，我喜欢第二种方式：

第一：

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

第二：

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

Answer 3

在JSX中，组件属性（或props）编译为纯JavaScript对象。 Prop名称用作对象的键，prop值存储在这些键下。 The first example from the JSX docs做得非常好。在您的情况下，{view === 'default' && true}是没有关联的道具名称的原始值。如果没有用作键的prop名称（由语法name=指定），JSX无处可将该值放在最终的props对象中。

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

反应内联条件组件属性

更新

3 个答案: