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 的 shorthand 所以我用 [=20= 解决了它]

<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 仅考虑 props 有效的 attributes（如果不是，则不会渲染该属性） .检查 all supported html attributes。然后，最后，如果它是一个布尔属性，它会删除 true/false 值，正确呈现它。

例如：<button active={true}></button> 被转译为 React.createElement("button", { active: true });，然后 React 呈现为 DOM <button></button>，因为 active 中没有属性 HTML <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 属性...我创建了一个 fiddle 来演示：https://jsfiddle.net/mrlew/5rsx40gu/

Answer 2

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

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

Answer 3

实际上，我想这是我以前在中有时回答过的重复问题。对于这个特定的 post，布尔值不需要条件属性，因为它工作得很好，如下所示：

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

或创建您自己的布尔值：

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

两者都很好，因为当booleanValue为false时，react没有看到active属性，因此它不存在，除非您将 checked 道具传递给特定组件，该组件将从 this.props.

接收到错误检查的道具

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

第一个：

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

第二个：

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

React 内联条件组件属性

React inline conditional component attribute

javascript

jsx

reactjs

react-bootstrap

更新