React-特殊标签属性

小鱼儿 2023-07-04 15:54 125阅读 0赞

在 React 中，标签的 `class` 属性要用 `className` 代替；

行内的样式属性需要使用对象的形式书写，多个单词组成的属性使用驼峰式命名；最终要用 `{}` 在最外层对样式进行包裹；

`<able` 标签的 `for` 属性要替换成 `htmlFor`。

示例：

main.css

* { 
      margin: 0;
      padding: 0;
    }
    
    .box { 
      width: 200px;
      height: 200px;
      margin: 20px;
      text-align: center;
      line-height: 200px;
      background-color: purple;
    }

index.js

import React from 'react'
    import ReactDOM from 'react-dom'
    
    import './css/main.css'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* class 替换为 className */}
            <div className="box">box</div>
    
            { /* for 替换为 htmlFor */}
            <label htmlFor="ipt">用户名</label>
            <input id="ipt" />
    
            { /* 行内样式使用对象的形式 */}
            <div className="box" style={ {  color: "white", backgroundColor: "skyblue", border: "2px dotted red" }}>box</div>
          </div>
        )
      }
    
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200212215347925.gif]

[20200212215347925.gif]: https://img-blog.csdnimg.cn/20200212215347925.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 React-特殊标签属性

在 React 中，标签的 `class` 属性要用 `className` 代替；行内的样式属性需要使用对象的形式书写，多个单词组成的属性使用驼峰式命名；最终要用 `{}

小鱼儿/ 2023年07月04日 15:54/ 0 赞/ 126 阅读

相关 html-标题标签、水平线标签和特殊字符

　　标题标签　　　　 <h1></h1> <h2></h2> ...... <h6></h6> 　　　　从h1到h6，大小是依次变小，同时会自动换行　　水平线标签

超、凢脫俗/ 2023年06月03日 05:52/ 0 赞/ 13 阅读

相关 React_react如何输入字符串标签，html标签

.js 字符串标签输入需要使用 dangerouslySetInnerHTML=\{ \{\_\_html:你好输入的字符串\}\} .html <div id

柔情只为你懂/ 2023年02月13日 00:23/ 0 赞/ 23 阅读

相关 html5s标签,HTML几个特殊的属性标签

以下几项属性对于浏览器的兼容很不好. 1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框

超、凢脫俗/ 2022年10月10日 11:22/ 0 赞/ 153 阅读

相关转译特殊符号标签

/\\ \ DealingCharacter.java \ Description: \ @author li.b \ @version 2.0

小鱼儿/ 2022年08月27日 11:59/ 0 赞/ 196 阅读

相关标签及属性

换行标记：<p>和<br> <h1>~<h6>：数字越小字体越大 <b>...</b>：黑体 <i>...</i>：斜体 <u>...<

淡淡的烟草味﹌/ 2022年06月12日 11:14/ 0 赞/ 245 阅读

相关 React（16）包裹标签 React.Fragment

24、包裹标签 React.Fragment 在 Vue 里，我们会用 `<template></template>` 标签来包裹一些不能有父容器的复数同级标签。例如

比眉伴天荒/ 2022年05月31日 08:09/ 0 赞/ 184 阅读

相关 script标签属性

![70][] [70]: /images/20220521/f3cdfb5b7ca9421595f60fe5cc125f1b.png

╰半橙微兮°/ 2022年05月20日 22:34/ 0 赞/ 267 阅读

相关 POM.XML特殊标签profiles

这个应该是决定配置文件特别是dubbo的配置文件读取的是哪个文件夹下的dubbo配置，每种配置文件夹代表不同的环境。 ![在这里插入图片描述][watermark_typ

谁践踏了优雅/ 2022年01月10日 00:47/ 0 赞/ 265 阅读

相关 react native 标签出错.

这种错误为标签错误，没办法，你只能往标签上找了，但不一定是<Text></Text>,我是在<TextInp

你的名字/ 2021年01月12日 03:27/ 0 赞/ 622 阅读