React 内联条件组件属性

Posted 2023-02-22

【中文标题】React 内联条件组件属性

【英文标题】：React inline conditional component attribute

【发布时间】：2017-06-07 11:19:06

【问题描述】：

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

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

【问题讨论】：

我发布了一个答案。但我想我误解了。 指示按钮处于活动状态是什么意思？你是说造型？或自定义 active 属性（AFAIK 没有原生 html 活动属性，但 disabled）？

@mrlew 一个 active 属性。我实际上解决了它并发布了更新，但我仍然想知道 2 语法之间的区别。与active=true相比，在组件内部打印active会更容易

我明白你的意思。刚刚替换了我的答案。

【参考方案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/

【参考方案2】：

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

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

【参考方案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 ) />