Javascript React内联条件组件属性

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

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

它通过了语法错误并显示良好，但这不是我想要实现的

我怎样才能解决这个问题？为什么它没有通过呢

更新 因此，我刚刚发现在

react bootstrap

中，属性

active

是

active=true

的缩写，因此我使用

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

对

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

---

首先，JSX只是一个语法糖。因此，它可能看起来像，但实际上，您没有指定

html属性

：事实上，您总是传递

道具

例如，JSX代码

被传输到

React.createElement（'input'，{type:'button'，value:'mybutton'}）

。必要时，React引擎将这个

React元素作为HTML元素呈现给DOM

也就是说，JSX传输的
prop
值不为true（检查）。例如：
被传输到
React.createElement（按钮，{active:true}）

但是，我们知道HTML5规范不接受
属性=true
（如上所述）。例如：
无效。正确的是

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

例如：
被传输到
React.createElement（“按钮”{active:true}）
然后React呈现到DOM
，因为HTML规范中没有
标记的
活动属性（不在支持的属性列表中）

但是
被传输到
React.createElement（“按钮”{disabled:true}）
和React渲染到DOM

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

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

这意味着：

被传输到
React.createElement（按钮，{active:true}）

及

被传输到
React.createElement（按钮，{active:true}）

同样的事情

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

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



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

按钮
组件必须以某种方式处理此
活动
道具。它可以呈现
按钮
元素，例如，更改其样式，传递
已禁用的
属性。。。我创建了一个提琴来演示这一点：
在JSX中，组件属性（或道具）编译成一个普通的JavaScript对象。道具名称用作对象的关键点，道具值存储在这些关键点下。很好地演示了这一点。在您的例子中，
{view==='default'&&true}
是一个没有相关属性名称的原始值。如果没有作为键使用的prop名称（由语法
name=
指定），JSX将无法将该值放入最终的props对象中

但是，如果花括号内的表达式计算为对象，JSX将通过原始语法接受props。例如，您可以执行
{{active:view==“default”}
。在这种情况下，JSX可以从提供的对象中获得它所需的键和值，因此不需要
active=
。
事实上，我想这是一个重复的问题，我在以前回答过它。对于这篇特定文章，布尔值不需要condition prop，因为它的工作原理如下：

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

第二：

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


我发布了答案。但我想我搞错了。指示按钮处于活动状态是什么意思？你是说造型？或者自定义的
活动属性
属性（如果没有本机html活动属性，但是
已禁用
）？@mrlew是活动属性。我实际上解决了这个问题并发布了一个更新，但我仍然想知道这两种语法之间的区别。仅在组件内部打印
active
要比
active=true更容易些
我明白你的意思了。只是换了我的答案。
const { booleanValue } = this.props;
return (
    <input checked={booleanValue} />
);

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

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

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