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

Answer 1

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

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

也就是说，我们有 JSX 将 prop 转译为没有 true 的值（检查 docs）。例如：<Button active></Button> 被转译为 React.createElement(Button, { active: true });。

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

因此，为了将 HTML 元素渲染到 DOM，React 只考虑有效的 attributes 的 props（如果不是，则不渲染该属性）。检查all supported html attributes。然后，最后，如果它是一个布尔属性，它会删除 true/false 值，正确呈现它。

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

但是 <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 属性将传递给具有 true 值的组件。如果不相等，则使用 false 值。

Button 组件必须以某种方式处理这个active 属性。它可以渲染button 元素，例如，更改它的样式，传递disabled 属性...我创建了一个小提琴来演示这一点：https://jsfiddle.net/mrlew/5rsx40gu/

Answer 2

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

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

Answer 3

实际上，我猜这是我之前在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 })} />