ReactJS之JSX的语法

最新推荐文章于 2024-01-17 23:02:22 发布

Quincy379

最新推荐文章于 2024-01-17 23:02:22 发布

阅读量295

点赞数

分类专栏： ReactJS 文章标签： JSX

本文链接：https://blog.csdn.net/qq_33733970/article/details/79592165

版权

ReactJS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.首字母大小写
2.嵌套
3.求值表达式
4.htmlFor和className
5.驼峰命名

M1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var style = {
        color:"red"
    }
    var HelloWorld = React.createClass({
        render: function () {
            return <p>hello {this.props.name?this.props.name:"world"}</p>
        }
    })
    React.render(<div style={style}><HelloWorld name="Quincy"></HelloWorld></div>, document.body)
</script>
</body>

</html>

M2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var style = {
        color: "red"
    }
    var HelloWorld = React.createClass({
        getName: function () {
            if (this.props.name){
                return this.props.name
            }
            else{
                return "World"
            }
        },
        render: function () {
            var name = this.getName()
            return <p>hello {name}</p>
        }
    })
    React.render(<div style={style}><HelloWorld name="Quincy"></HelloWorld></div>, document.body)
</script>
</body>

</html>

M3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var style = {
        color: "red"
    }
    var HelloWorld = React.createClass({

        render: function () {
            //如果左边为真返回左边，如果左边为假则返回右边
            return <p>hello {this.props.name||"World"}</p>
        }
    })
    React.render(<div style={style}><HelloWorld name="Quincy"></HelloWorld></div>, document.body)
</script>
</body>

</html>

万能函数表达式（闭包函数）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var style = {
        color: "red"
    }
    var HelloWorld = React.createClass({

        render: function () {

            return <p>hello {(function (obj) {
                if (obj.props.name)
                    return obj.props.name
                else
                    return 'World'
            })(this)}</p>
        }
    })
    React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)
</script>
</body>

</html>