<react学习笔记(2)>JSX语法和样式的设置

最新推荐文章于 2023-11-29 11:31:17 发布

ducode

最新推荐文章于 2023-11-29 11:31:17 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c0252d3e51d4539a175a53c

版权

1.JSX

JSX(JavaScriptXML)语法入门:

JSX不是一门语言,是一个语法/语法糖
JSX标签其实就是HTML标签,在js中使用这些标签时,不使用"",遇到HTML标签(以<开始),就用HTML规则解析;遇到代码块(以{开始),就用js规则解析。
JSX语法浏览器无法解析，需使用插件将其转化为js代码
代码更加直观

JSX规范：

首字母必须大写
驼峰命名法
使用className与htmlFor 代替了class和for
组件与组件之间是可以嵌套的
在JSX语法中是能使用求值表达式，不能使用语句(if,for,switch)
只有一个顶层标签

例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>react笔记</title>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <div id="demo1"></div>
        <script type="text/babel">
            var oDemo = document.getElementById("demo1"),
                Demo = React.createClass({
                    change(){
                        return "demo";
                    },
                    handleClick(){
                        alert(1);
                    },
                    render(){
                        //this指向整个组件
                        return <div className="demo" onClick={this.handleClick}>这是一个{this.change()}</div>
                    }
                });
                //渲染
                ReactDOM.render(<Demo/>, oDemo);
        </script>
    </body>
</html>
复制代码

2.JSX语法中的注释

使用{/* */}注释

<div id="demo2"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo2"),
        HelloWorld = React.createClass({
            render(){
                // 现在这里是属于js的部分,不属于JSX语法的部分
                return (
                    <div className="box" // class名字>
                        {/*这是一个标题*/}
                        <h1 className="title">Hello World</h1>
                        {/*这是说明*/}
                        <p>你好世界！</p>
                        <div className="box2">你好</div>
                    </div>
                )
            }
        })
    ReactDOM.render(<HelloWorld/>, oDemo);
</script>
复制代码

3.JSX中设置样式的三种形式

组件的样式：

行内样式：写行内样式时需要使用两个{}，==> {{}}
对象样式：在return前面定义一个样式对象，与HTML写法不同
css样式

注意事项：在HTML5中与在React中样式书写区别

HTML5中是以分号";"结束，React中是以逗号","结束
HTML5中属性与值都不需要加上引号，React中key值使用驼峰命名，value值需要加上引号
HTML5中设置带数字的值需要加单位，React中直接写数字

例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.js"></script>
    </head>
    <body>
        <div id="demo3"></div>
        <script type="text/babel">
            var oDemo = document.getElementById("demo3"),
                HelloWorld = React.createClass({
                    render(){
                        var styles = {
                            color: 'blue',
                            fontSize: '30'
                        };
                        return (
                            <div className="box">
                                <h3 className="title" style={{color:'red',backgroundColor:'lime'}}>行内样式</h3>
                                <p className="subtitle" style={styles}>对象样式</p>
                                <p className="details">css样式</p>
                            </div>
                        );
                    }
                });
            ReactDOM.render(<HelloWorld/>, oDemo);
        </script>
    </body>
</html>
复制代码

4.非DOM操作

dangerouslySetInnerHTML: 在JSX中直接插入HTML代码，动态的添加HTML内容，由用户添加需要使用属性：__html

//demo4
<div id="demo4"></div>
    <script type="text/babel">
        var oDemo = document.getElementById("demo4");
            Demo = React.createClass({
            render:function(){
                var text = {
                    __html:'<span>我是在div中的span标签</span>'
                };
                return (<div>
                    <div dangerouslySetInnerHTML={text}></div>
                </div>);
            }
        });
        ReactDOM.render(<Demo/>, oDemo);
复制代码

ref: 父组件引用子组件例： this.refs.name
key: 提高渲染性能，React通过key值判断是否重新渲染

转载于:https://juejin.im/post/5c0252d3e51d4539a175a53c

ducode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
<react学习笔记(2)>JSX语法和样式的设置

1.JSXJSX(JavaScriptXML)语法入门:JSX不是一门语言,是一个语法/语法糖JSX标签其实就是HTML标签,在js中使用这些标签时,不使用"",遇到HTML标签(以<开始),就用HTML规则解析;遇到代码块(以{开始),就用js规则解析。JSX语法浏览器无法解析，需使用插件将其转化为js代码代码更加直观JSX规范：首字母必须大写驼峰命名法使用clas...
复制链接

扫一扫