React内联条件组件属性

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'}

- JohnnyQ

---

我发了一个回答，但我觉得我误解了。你所说的“指示按钮活动”，是指样式吗？还是自定义的“active”属性（据我所知，没有原生的HTML active属性，但有“disabled”）？ - mrlew

@mrlew 一个 active 属性。我已经解决了并发布了更新，但我仍然想知道这两种语法的区别。在组件内部只打印 active 肯定更容易，而不是 active=true。 - JohnnyQ

我明白了你的意思。我刚刚修改了我的回答。 - mrlew

Answer 1

首先，JSX只是React.createElement的一种语法糖。因此，它看起来像是，但实际上，你不指定html属性：事实上，你总是在传递props。

例如，JSX代码<input type="button" value="My button" />被转译为React.createElement('input',{type:'button',value:'My Button'})。必要时，React引擎将该React Element呈现为HTML元素。

也就是说，我们可以把一个没有值的prop转译为true（参见docs）。例如：<Button active></Button>被转译为React.createElement(Button, { active: true });。

但是，我们知道 HTML5 规范不接受 attribute=true（如此处所指出）。例如：<button disabled=true></button> 是无效的。正确的写法是 <button disabled></button>。

因此，为了将 HTML 元素渲染到 DOM 中，React 只考虑有效的attributes属性（如果不是，则该属性不被渲染）。请查看所有支持的 HTML 属性。最后，如果它是布尔属性，则删除true/false值，以正确地呈现它。

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

但是，<button disabled={true}></button> 被转换为 React.createElement("button", { disabled: true });，然后 React 渲染到 DOM 中 <button disabled></button>。

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

你试图将一个 active 属性传递给 Button 组件（首字母大写意味着这是一个 React 组件：在你的代码中处理了名为 Button 的 React 组件）。

这意味着： <Button active></Button> 被转换为 React.createElement(Button, { active: true }); 和

"

<Button active={true}></Button>被转译为React.createElement(Button, { active: true });

同样的事情！

因此，如果您想进行条件prop，只需像这样简单地执行：

"

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

您在括号内有一个条件。这意味着，如果您的this.state.view等于default（为真），则将使用true值将active属性传递给组件。如果不相等，则使用false值。

然后，Button组件必须以某种方式处理此active属性。它可以呈现button元素，并更改其样式，传递disabled属性等。我创建了一个演示此功能的fiddle: https://jsfiddle.net/mrlew/5rsx40gu/。

- mrlew

Answer 2

实际上，我想这是一个重复的问题，我以前在这个链接中回答过。对于这篇文章，没有必要使用条件属性来表示布尔值，因为它可以像下面这样良好地工作：

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

或者创建您自己的布尔值：

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

两种方法都可以正常工作，因为当 booleanValue 为 false 时，react 就看不到 active 属性，因此它不存在，除非你将 checked 属性传递给特定组件，该组件将从 this.props 中接收到 false 的 checked 属性。

但是，如果你希望在特定组件上有一个带有条件的属性，如果条件返回 false，则不希望该属性存在，则有两种方法，我喜欢第二个:

第一种方法：

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

其次：

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

- AmerllicA

Answer 3

在JSX中，组件属性（或props）编译为一个普通的JavaScript对象。Prop名称用作对象的键，prop值存储在这些键下面。JSX文档中的第一个示例很好地演示了这一点。在你的情况下，{view ==='default' && true}是一个没有关联prop名称的原始值。如果没有要用作键的prop名称（由语法name=指定），JSX就无法将该值放入最终的props对象中。

然而，如果花括号内的表达式求值为一个对象，JSX将通过您的原始语法接受props。例如，您可以这样做：{{ active：view ===“default” }}。在这种情况下，JSX可以从提供的对象获取所需的键和值，因此不需要active=。

- Elliot