在JSX中使用<If><Choose><When&
发布时间:2020-12-15 03:28:38 所属栏目:百科 来源:网络整理
导读:默认JSX不支持此类标签,我们需要一个插件来实现. jsx-control-statements提供了这个功能. 安装 npm install --save-dev jsx-control-statements 语法 If // simpleIf condition={ true } spanIfBlock/span/If// using multiple child elements and / or expr
安装npm install --save-dev jsx-control-statements 语法If// simple <If condition={ true }> <span>IfBlock</span> </If> // using multiple child elements and / or expressions <If condition={ true }> one { "two" } <span>three</span> <span>four</span> </If> Choose<Choose> <When condition={ test1 }> <span>IfBlock</span> </When> <When condition={ test2 }> <span>ElseIfBlock</span> <span>Another ElseIfBlock</span> <span>...</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> // default block is optional; minimal example: <Choose> <When condition={true}> <span>IfBlock</span> </When> </Choose> When & Otherwise// Before transformation <Choose> <When condition={ test1 }> <span>IfBlock1</span> </When> <When condition={ test2 }> <span>IfBlock2</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> // After transformation { test1 ? <span>IfBlock1</span> : test2 ? <span>IfBlock2</span> : <span>ElseBlock</span> } For// you must provide the key attribute yourself <For each="item" of={ this.props.items }> <span key={ item.id }>{ item.title }</span> </For> // using the index as key attribute is not stable if the array changes <For each="item" index="idx" of={ [1,2,3] }> <span key={ idx }>{ item }</span> <span key={ idx + '_2' }>Static Text</span> </For> githubhttps://github.com/AlexGilleran/jsx-control-statements (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- ruby-on-rails – 在.bashrc环境变量中存储Amazon S3凭据会
- c# – 为什么JSON.NET在一行上序列化所有内容?
- c# – 如何将对象引用传递给Task(TPL)?
- AJax第一个小实例--初学者
- ruby-on-rails – 在Warden auth失败后Rails日志中没有状态
- 当我不知道约束的名称时,如何在Oracle中删除一个“not null
- xStream完美转换XML、JSON
- 正则表达式速查表及常用正则表达式
- 详解在Vue中使用TypeScript的一些思考(实践)
- SyntaxError: JSON.parse: unexpected character at line 1