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

作者：笔触狂放9 | 2024-03-01 12:45:54

踩

jsx style转义

共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'}是一个对象所以用花括号扩起来。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】