草庐IT

javascript - React 内联条件组件属性

coder 2025-01-25 原文

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

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

如您所见，我只想在 this.state.view 时指示按钮事件等于默认值。但是，我得到 Unexpected token, error...

但是当我尝试在它之前放置一个属性时，例如:

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

它通过了语法错误并显示正常，但这不是我想要实现的。

我该如何解决这个问题？它没有通过的原因可能是什么？

更新

所以我刚刚在 react-bootstrap 中发现属性(property)active是 active=true 的简写所以我用

解决了它 
<Button active={this.state.view === 'default'}></Button>

所以万一有人遇到这个问题，我就把它留在这里。但是，我仍然想知道为什么条件属性在没有将其包含在类似 prop 的语法中的情况下失败，例如:

这个:

active={this.state.view === 'default'}

对比

{this.state.view === 'default' && 'active'}

最佳答案

首先，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 .然后，最后，如果它是一个 bool 属性，它会删除 true/false 值，正确呈现它。

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

但是<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 (真)，active prop 将通过 true 传递给组件值(value)。如果不相等，用false值(value)。

Button那么，组件必须以某种方式处理这个 active支柱。它可以呈现 button元素，例如，改变它的样式，传递 disabled Prop ......我创建了一个 fiddle 来证明这一点:https://jsfiddle.net/mrlew/5rsx40gu/

关于javascript - React 内联条件组件属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41798027/

内联javascriptcodeButtonactivereactjsjsxreact-bootstrap

有关javascript - React 内联条件组件属性的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  4. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  9. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  10. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？ 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

随机推荐