热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用理性反应在JSX中有条件地设置HTML属性?

如何解决《如何使用理性反应在JSX中有条件地设置HTML属性?》经验,为你挑选了1个好方法。

我想呈现一个HTML复选框,其选中状态由数据控制。

给出一个接收item类型的无状态组件{ label: string, checked: bool}

像这样:

let compOnent= ReasonReact.statelessComponent("TodoItem");

let make = (~item, _children) => {
  render: _self => {
     
  • {ReasonReact.string(item.label)}
  • } }

    如何根据条件将属性的存在添加checkedinput标签item.checked == true



    1> glennsl..:

    正如@wegry在评论中说的那样,直接传递值似乎更适合您的用例,因为它item.checked已经是一个布尔值,并且checked需要一个布尔值。

    但是更笼统地说,由于JSX属性只是幕后的可选函数参数,因此您可以使用一种巧妙的语法技巧来显式地将其传递option给它:在值之前加上?。以您的示例为例:

    let compOnent= ReasonReact.statelessComponent("TodoItem");
    
    let make = (~item, _children) => {
      render: _self => {
         
  • {ReasonReact.string(item.label)}
  • } }

    或者举个例子,说明您已经可以选择:

    let link = (~url=?, label) => 
       {ReasonReact.string(label)} 
    

    原因文档在“原因”文档的“功能”页面上标题为“ 显式传递可选 ”的部分中进行了说明。


    推荐阅读
    • MVC中的自定义控件
      怎么样创建自定义控 ... [详细]
    • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
    • Webpack5内置处理图片资源的配置方法
      本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
    • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
      本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
    • 知识图谱——机器大脑中的知识库
      本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
    • 后台获取视图对应的字符串
      1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
    • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。那么如何实现跨域呢,以下是实现跨域的一些方法。 ... [详细]
    • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
    • GO语言 包 if..else.. for循环 switch 数组
      包1.什么是包1.新建一个文件夹,内部写很多go文件,但是包名必须一致,改文件夹就是一个包2.作用和优点包用于组织Go源代码,提供了更好的可重用性与可读性。由于包提供了代码的封装, ... [详细]
    • 表达式树摘录(1)
      本文主要讲述ConstantExpression介绍表示具有常量值的表达式。ParameterExpression介绍表示命名的参数表达式。UnaryExpression介绍表示包 ... [详细]
    • #ReactivityFundamentals#DeclaringReactiveState ... [详细]
    • 点击后defaultEducation的值明明改变了,但props传给子组件却watch不到 ... [详细]
    • 本文介绍了自学Vue的第01天的内容,包括学习目标、学习资料的收集和学习方法的选择。作者解释了为什么要学习Vue以及选择Vue的原因,包括完善的中文文档、较低的学习曲线、使用人数众多等。作者还列举了自己选择的学习资料,包括全新vue2.5核心技术全方位讲解+实战精讲教程、全新vue2.5项目实战全家桶单页面仿京东电商等。最后,作者提出了学习方法,包括简单的入门课程和实战课程。 ... [详细]
    author-avatar
    每天吃的饱饱的
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有