react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释

共index.js、index.html、 TodoList.js这三个文件，主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法，会在下方做全面的解释

运行效果：

index.js:

import React from 'react';
import ReactDOM, { unmountComponentAtNode } from 'react-dom'
import TodoList from './TodoList'ReactDOM.render(<TodoList />,document.getElementById('root'))

index.html:

<!DOCTYPE html>
<html lang="en"><head><title>TodoList</title></head><body><div id="root"></div></body>
</html>

TodoList.js：

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import {Input,Button} from 'antd'
import { UserOutlined } from '@ant-design/icons';class TodoList extends Component {render() {return (<div><div><Input placeholder="xxx"  style={{width:'233px', marginRight:'10px'}} prefix={<UserOutlined />} /><Button type="primary">增加</Button></div></div>);}
}export default TodoList;

React中jsx为何会写成 style={{width:'233px', marginRight:'10px'}}，这样双花括号{{}}的写法呢？

react组件jsx，行内style固定写法就是双花括号：

<Input placeholder="xxx"  style={{width:'233px', marginRight:'10px'}} prefix={<UserOutlined />} />

注意style中有多组属性要用逗号','隔开，而不是html行内样式的分号';' 要注意区分

有两对花括号的原因：

①外层花括号：因为React使用的是JSX语法，JSX语法中嵌入任何js变量、表达式、对象都要用花括号{}扩起来，

②内层花括号：JSX如果用到行内CSS style样式时，这个行内样式必须是一个js对象，即{width:'233px', marginRight:'10px'}是一个对象所以用花括号扩起来。

react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释相关推荐

html5中行内样式写法,react怎么写行内样式？
react怎么写行内样式?下面本篇文章给大家介绍一下react 行内样式几种写法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react 行内样式几种写法法一这是评论列表组件 ...
html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
vue文件行内样式style提示插件
有时候写点demo不想写class时会偏向于写style 安装Vue Language Features (Volar) 设置 -> 搜索prevent -> 把Snippets Prev ...
React技巧之设置行内样式
在React中设置行内样式: 将元素的style prop设置为对象. 为元素的样式设置指定的属性和值. 比如说,<div style={{backgroundColor: 'salmon', ...
Taro框架使用React语法开发小程序有关行内样式解析问题
前两天有个同事在使用Taro的react语法开发小程序时碰到了一个关于行内样式的问题: 本以为蓝色这两个字的颜色应该是蓝色的,结果发现这个行内样式却没有生效,还是黑色.于是看了编译后的代码,居然是这样 ...
html行样式怎么写,html行内样式字号怎么写
在html中,行内样式字号的写法是"".可以使用style属性规定元素的行内样式(inline style),该属性将覆盖任何全局的样式设定. 本教程操作环境:windows7系统 ...
vue- style行内样式
style行内样式 :style="变量" :style="{color:'red',width:'100px'}" :style="[可做三元运算判 ...
将html中的style内联样式转换为行内样式
需求:因为有一段html需要传递到其他的地方,内联样式可能与其他的样式冲突,所以要将写在style标签中的内联样式转换为行内样式思路: /*** 参数接收html字符串* 将内联样式表里面的样式改为 ...
React的行内样式
使用React的行内样式设置样式 (1)在JSX文件中定义样式变量,和定义普通的对象变量一样 let backAndTextColor = {backgroundColor:'blue',color: ...

react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释

React中jsx为何会写成 style={{width:'233px', marginRight:'10px'}}，这样双花括号{{}}的写法呢？

react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释相关推荐

最新文章

热门文章