热门标签 | 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",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
    • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。那么如何实现跨域呢,以下是实现跨域的一些方法。 ... [详细]
    • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
    • QuestionThereareatotalofncoursesyouhavetotake,labeledfrom0ton-1.Somecoursesmayhaveprerequi ... [详细]
    • GO语言 包 if..else.. for循环 switch 数组
      包1.什么是包1.新建一个文件夹,内部写很多go文件,但是包名必须一致,改文件夹就是一个包2.作用和优点包用于组织Go源代码,提供了更好的可重用性与可读性。由于包提供了代码的封装, ... [详细]
    • React基础篇一 - JSX语法扩展与使用
      本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
    • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
    • 用required属性判断用户是否至少选了一个checkboxradio可以设置相同的name通过required判断用户是否至少选择了一个 ... [详细]
    • 关于extjs开发实战pdf的信息
      本文目录一览:1、extjs实用开发指南2、本 ... [详细]
    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社区 版权所有