我到处找,找不到我问题的答案。所以我想要一个只在特定条件下显示的条件属性,例如:
<Button {this.state.view === 'default' && 'active'}></Button>
如您所见,我只想在this.state.view
等于默认值时指示按钮处于活动状态。然而,我得到了意想不到的令牌,错误...
但当我尝试将属性放在前面时,例如:
<Button isActive={this.state.view === 'default' && 'active'}></Button>
它传递语法错误并显示良好,但这不是我想要实现的。
我怎样才能解决这个问题?它没有通过的原因是什么?
因此,我刚刚发现在react bootstrap
中,属性active
是active=true
的缩写,因此我使用
<Button active={this.state.view === 'default'}></Button>
所以如果有人遇到这个问题,我就把它留在这里。但是,我仍然想知道为什么条件属性失败而没有将其封闭在类似道具的语法中,例如:
这:
active={this.state.view === 'default'}
对
{this.state.view === 'default' && 'active'}
在JSX中,组件属性(或道具)编译为一个普通的JavaScript对象。道具名称用作对象的键,道具值存储在这些键下。来自JSX文档的第一个示例很好地演示了这一点。在你的情况下{view==='default'
但是,如果花括号内的表达式计算为对象,JSX将通过原始语法接受道具。例如,您可以执行
{{active: view==="默认"}}
。在这种情况下,JSX可以从提供的对象中获取它需要的键和值,因此不需要active=
。
事实上,我想这是一个重复的问题,我回答了这个链接有时前。对于这篇特定文章,布尔值不需要condition prop,因为它的工作原理如下:
const { booleanValue } = this.props;
return (
<input checked={booleanValue} />
);
或者创建自己的布尔值:
const booleanValue = someThing === someOtherThing;
return (
<input checked={booleanValue} />
);
它们都工作得很好,因为当booleanValue
为false
时,反应
不会看到active
prop,因此它不存在,除非您将检查的
prop传递给特定组件组件将从this.props
接收错误检查的prop。
但是,如果你想在你的特定组件上有一个带有条件的道具,如果条件返回false,你不想要它,有两种方法,我喜欢第二种:
第一:
<Component someProp={condition ? yourValue : undefined} />
第二:
<Component {...(condition && { someProp: yourValue })} />
首先,JSX只是React.createElement
的语法糖。因此,它可能看起来像,但实际上,您没有指定html属性
:事实上,您总是传递道具
。
例如,JSX代码
也就是说,我们有JSX转置一个没有值为true的
prop
(检查文档)。例如:
但是,我们知道HTML5规范不接受
属性=true
(如这里所指出的)。例如:
因此,要将HTML元素呈现给DOM,React只考虑有效的
属性的
道具
(如果不是,则不呈现属性)。检查所有支持的html属性。最后,如果它是一个布尔属性,它会删除真/假值,并正确地进行渲染。
例如:
但是<代码>
我这么说只是为了澄清你的情况。
您正试图将一个
active
道具传递给按钮
组件(第一个大写字母表示这是一个React组件:代码中的某个地方处理了一个名为按钮
的React组件)。
这意味着:
<代码>
和
<代码>
同样的事情!
因此,如果你想做一个有条件的
道具
,你可以简单地做这样的事情:
<Button active={this.state.view === 'default'}></Button>
括号内有一个条件。这意味着,如果您的
this.state.view
等于default
(true),active
道具将以true
值向下传递到组件。如果不相等,则使用false
值。
按钮
组件必须以某种方式处理此活动
道具。它可以呈现按钮
元素,例如,更改其样式,传递已禁用的
属性。。。我制作了一把小提琴来证明这一点:https://jsfiddle.net/mrlew/5rsx40gu/
问题内容: 如果满足特定条件,是否有办法仅向React组件添加属性? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应解释我想要的内容,但将无法正常工作(解析错误:意外的标识符)。 问题答案: 显然,对于某些属性,如果您传递给它的值不真实,React足
问题内容: 我想知道是否有一种方法可以使用ng-show等方法来有条件地显示内容,例如在骨干.js中,我可以对模板中的内联内容执行以下操作: 但在角度上,我似乎仅限于显示和隐藏包装在html标签中的东西 用angular推荐的仅使用{{}}而不是将内容包装在html标签中的有条件显示和隐藏inline内容的推荐方法是什么? 问题答案: 编辑:2Toad下面的答案是您正在寻找!支持那件事 如果您使用
在一个无子React组件中,由于在JSX条件中使用数组,我得到了“unique key prop”错误: 数组中的每个子元素都应该有一个唯一的“键”道具。 触发错误的代码如下所示: 我理解为什么在渲染子组件时需要关键道具,但是当“数组中的子”是像这样的任意子元素集时,我如何满足React/JSX?
我正在有条件地设置我的
对于在其生命周期的某个点隐藏的组件,呈现它的最佳方式是什么?1)渲染组件,但不显示它(显示:无)。2)只在需要时渲染组件。什么对性能更好?如果组件的道具和状态稍后更新,是否最好让组件存在,但隐藏在虚拟DOM中? 或者这个:
问题内容: 我想知道是否有比使用if语句更好的有条件地传递道具的方法。 例如,现在我有: 没有if语句,有没有办法写这个?我正在按照JSX中的一种inif-if语句的思路进行思考: 总结 :我正在尝试找到一种方法来为其定义道具,但要传递一个值(或执行其他操作),使得该道具的值仍从其自身值中获取。 问题答案: 您的想法很贴切。事实证明,传递道具与根本不包括道具相同,这仍会触发默认道具值。因此,您可以