JSX使用、写法

葱头的故事
已于 2023-11-01 16:23:37 修改
阅读量643
点赞数
分类专栏： jsx 文章标签： jsx js react
于 2021-11-29 16:11:53 首次发布
本文链接：https://blog.csdn.net/weixin_43993121/article/details/121612607
版权
jsx 专栏收录该内容
1 篇文章 0 订阅
订阅专栏

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .para {
                font-size: 20px;
                color: green;
                text-decoration: line-through;
            }

            .active {
                color: red;
            }
        </style>
    </head>

    <body>
        <div id="app"></div>


        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <script type="text/babel">  //这里type="text/babel"不能省略，否则无法使用jsx

            class App extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        firstname: "kobe",
                        lastname: "bryant",
                        isLogin: true
                    }
                }

                // JSX 写法 Javascript XML
                render() {
                    const username = "Cindy", age = 13;
                    const isShow = true;
                    const firstName = "Can";
                    const lastName = "Bear"
                    const obj = {
                        username: "Gee", age: 23
                    }
                    const arr = ['apple', 'banana', 'water'];
                    const users = [{
                        id: 1,
                        name: "Cindy",
                        age: 23
                    }, {
                        id: 2,
                        name: "Peter",
                        age: 13
                    }, {
                        id: 3,
                        name: "Ann",
                        age: 3
                    }]
                    const img = {
                        src: "https://img0.baidu.com/it/u=1023612170,1481600981&fm=26&fmt=auto",
                        title: "Cat"
                    }
                    const title = "XKJH KDBJHSBD S dsds"
                    const msg = [{
                        id: 1,
                        name: "xxxsdsdsds"
                    }, {
                        id: 2,
                        name: "fdferefe"
                    }, {
                        id: 3,
                        name: "dfggff"
                    }]

                    const attr = {
                        src: "https://img0.baidu.com/it/u=383573248,1121074447&fm=26&fmt=auto",
                        title: "It is a cat.",
                        alt: "cat"
                    }

                    const isButton = true

                    const pStyle = {
                        fontSize: "24px",
                        color: "orange"
                    }

                    return (
                        <div>
                            {/* 字符串 数字  */}
                            <div>{username}</div>
                            <div>{age}</div>
                            ----------

                            {/* 布尔值 null、undefined*/}
                            {/* 需要转换成字符串才会显示; 否则不显示 */}
                            <div>{'' + isShow}</div>
                            <div>{'' + null}</div>
                            ----------

                            {/* 运算符表达式 */}
                            <div>{firstName + " " + lastName}</div>
                            ----------

                            {/* 三元运算表达式 */}
                            <h2>{isShow ? 'Cat"s secrect' : 'House'}</h2>
                            <div>{!isButton ? <button>button</button> : <div>DIV</div>}</div>
                            ----------

                            {/* 对象 */}
                            <div>Username: {obj.username}</div>
                            <div>age: {obj.age}</div>
                            ----------

                            {/* 循环数组 */}
                            <ul>
                                {
                                    users.map(item => {
                                        return <li key={item.id}>name:{item.name};age: {item.age}</li>
                                    })
                                }
                            </ul>
                            ----------

                            {/* 标签属性直接使用{}包裹 */}
                            <img src={img.src} title={img.title} />
                            ----------

                            {/* 函数调用 */}
                            <h3>{this.getFullName()}</h3>
                            <div>{this.article()}</div>
                            <div>number: {this.getNum(12)}</div>
                            ----------

                            {/* 事件绑定函数*/}
                            <button onClick={this.printSth}>print</button>
                            <input onChange={this.onChange} placeholder="请输入" />
                            {/* 如果事件要传参，要在外面加一层箭头函数 或者使用 bind，否则执行不了 */}
                            <button onClick={() => { this.printVal(1) }}>get 1</button>
                            <button onClick={() => { this.printVal(10) }}>get 10</button>
                            <button onClick={this.printVal.bind(this, 21)}>get 21</button>
                            <button onClick={this.printVal.bind(this, 20)}>get 20</button>
                            ----------

                            {/* 标签属性使用扩展运算符 */}
                            <img {...attr} />
                            ----------

                            {/* 样式 */}
                            {/* 内联样式 */}
                            <p style={{ fontSize: "18px", color: "pink" }}>Paragraph</p>
                            <p style={ pStyle }>Paragraph</p>
                            {/* className */}
                            <p className='para'>Paragraph</p>
                            <p className='para active'>Paragraph</p>
                            {/* 还有使用classnames包的 */}
                        </div>
                    )
                }

                getFullName() {
                    return this.state.firstname + " " + this.state.lastname;
                }

                printSth() {
                    console.log('printing ... ');
                }

                article() {
                    return (
                        <div>
                            <h1>Heading</h1>
                            <p>paragraph 1</p>
                            <p>paragraph 2</p>
                            <p>paragraph 3</p>
                        </div>
                    )
                }

                getNum(val) {
                    return (
                        <b>{val}</b>
                    )
                }

                onChange(val) {
                    console.log('val', val);
                }

                printVal(val) {
                    console.log('val', val);
                }
            }
            ReactDOM.render(<App />, document.getElementById("app"));
        </script>
    </body>
</lang>
葱头的故事
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSX使用、写法

```html<!DOCTYPE html><lang lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0.
复制链接

扫一扫
专栏目录