React—02—jsx书写规范

---

 

一、jsx书写规范 

1.jsx里面只能有一个根元素

2.jsx通常以一个括号包裹起来，这样可以当作一个整体，方便实现换行等；

3.jsx可以有单标签元素，也可以有双标签元素，但是如果是单标签元素，需要用/结束。

4.在jsx中，{}语法，表示要插入一段js代码了。可以用来插入变量、插入表达式等

二、jsx注释

1.在jsx里写注释，要用 {/**/}的方式写；不管是html里的<!-- 注释符号 -->还是js里的//注释符号，都不可以用；

要用jsx的专门的注释语法。

 

三、jsx作为子元素时，可以插入的变量类型

1.number、string、array类型的变量在jsx中当作子元素时（就是原生html元素比如h2元素的子元素），可以直接显示。

2.undefined、null、布尔类型的变量在jsx中当作子元素时，不会显示。 如果想显示，需要转化为字符串进行显示；  

3.Object类型不能作为子元素进行显示，会报错

render() {
          const { counter, message, list } = this.state;
          const { aaa, bbb, ccc } = this.state;
          const { friend } = this.state;

          return (
            <div>
              <div>
                {/* number、string、array类型的变量在jsx中当作子元素时，可以直接显示。*/}
                <h2>{counter}</h2>
                <h2>{message}</h2>
                <h2>{list}</h2>

                {/* undefined、null、布尔类型的变量在jsx中当作子元素时，不会显示。
                  * 如果想显示，需要转化为字符串进行显示；  
                */}
                <h2>{aaa}, {String(aaa)}</h2>
                <h2>{bbb}, {bbb + ''}</h2>
                <h2>{ccc},{ccc.toString()}</h2>

                {/* Object类型不能作为子元素进行显示，会报错  */}
                <h2>{friend}</h2>
              </div>
            </div>
          );

 

四、jsx作为子元素时，可以插入的表达式

1.正常的加减乘除，运算表达式

2.三元表达式

3.执行一个函数、方法

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            firstName: 'tom',
            lastName: 'jerry',

            age: 18,

            movies: ['大话西游', '功夫', '星际创越']
          };
        }

        getMovies(){
          return this.state.movies.map(e => <li>{e}</li>);

        }

        render() {
          const { firstName, lastName } = this.state;
          const fullName = firstName + lastName;

          const { age } = this.state;
          const ageStr = age >= 18 ? '成年人' : '未成年人';

          const { movies } = this.state;
          const moviesList = movies.map(e => <li>{e}</li>);

          return (
            <div>
              <div>
                {/* 运算表达式  下面两个表达式等价*/}
                <h2>{firstName + lastName}</h2>
                <h2>{fullName}</h2>

                {/* 三元运算符 */}
                <h2>
                  {age >= 18 ? '成年人' : '未成年人'}
                  {ageStr}
                </h2>

                {/* 执行一个函数  */}
                <ul>{movies.map( e => <li>{e}</li>)}</ul>
                <ul>{this.getMovies()}</ul>
                <ul>{moviesList}</ul>
              </div>
            </div>
          );
        }
      }

 

 

 

五、jsx的属性绑定

1.元素的基本属性绑定， 比如title属性、src属性、href属性

就是在元素的属性上，直接绑定一个变量即可。

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            firstName: 'tom',
            lastName: 'jerry',

            imgUrl: 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',

            baidu:'http://www.baidu.com'
          };
        }

        render() {
          const { firstName, lastName,imgUrl } = this.state;

          return (
            <div>
              <div>
                <h2 title={firstName}>{firstName + lastName}</h2>

                <img src={imgUrl} alt="" />

                <a href={this.state.baidu}>跳转百度</a>
              </div>
            </div>
          );
        }
      }

 

2.元素的class属性绑定

 1. 由于jsx是js的拓展，所以在给元素的class属性赋值时，class属性和javascript的类class关键字会有一定的冲突，所以使用className代替元素的class属性，babel会给我们做好转化的

  2. className，可以用纯字符串绑定固定值，也可以绑定动态值（用{}绑定一个js的字符串运算表达式，用{}绑定一个js的模板字符串，用{}绑定一个js的变量）

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            isActive: true
          };
        }

        render() {
          const { isActive} = this.state;

          const className = `abc abb ${isActive ? 'active' : ''} `

          return (
            <div>
              <div>
                {/* 1. 由于jsx是js的拓展，所以在给元素的class属性赋值时，class属性和js的类class关键字会有一定的冲突，所以使用className代替元素的class属性，babel会给我们做好转化的
                    2. className，可以用纯字符串绑定，也可以用{}绑定一个js的字符串运算表达式，也可以用{}绑定一个js的模板字符串，也可以用{}绑定一个js的变量。
                */}
                <h2 className="abc abb"></h2>
                <h2 className={'abc ' + 'abb ' + isActive ? 'acitve' : ''}></h2>
                <h2 className={`abc abb ${isActive ? 'active' : ''} ` }></h2>
                <h2 className={className}></h2>
              </div>
            </div>
          );
        }
      }

 

3.元素的style属性绑定

1. 使用{}插入一个对象，所以是{{}}的形式，注意不是vue的mustanche语法

2. 对象的属性名使用驼峰命名法，因为jsx是js的拓展，而js是不支持-连接符的，所以像font-size这种js和jsx都无法识别

3. 对象的属性名是css属性名，值是css属性值

4. 对象的属性值需要使用单引号

      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            h2Style: {
              color: 'blue',
              fontSize: '30px'
            }
          };
        }

        render() {
          const { h2Style } = this.state;

          return (
            <div>
              <div>
                {/* 绑定style属性：
                  1. 使用{}插入一个对象，所以是{{}}的形式，注意不是vue的mustanche语法
                  2. 对象的属性名使用驼峰命名法，因为jsx只是js的拓展，而js是不支持-连接符的，所以像font-size这种js和jsx都无法识别
                  3. 对象的属性名是css属性名，值是css属性值
                  4. 对象的属性值需要使用单引号
                */}
                <h2 style={{ color: 'red', fontSize: '30px' }}>哈哈哈哈</h2>
                <h2 style={h2Style}>吼吼吼吼</h2>
              </div>
            </div>
          );
        }
      }

 

 

 

 

 

 

 

我总结下，jsx的props语法，

1.如果是给原生html元素传值，比如div元素、img元素

基本属性（比如原生html元素的title属性、src属性等）：传递字符串仍然是key=value的形式，传递js变量要用jsx语法即key={value}

特殊属性class：key要使用className，value要么字符串，要么jsx

特殊属性style：key还是style，但是value必须用jsx不能是字符串，且必须是传递一个对象才有效，且对象必须是对象键为fontSize对象值为’xxx‘等才有效

监听原生html元素的事件：key是原生事件名的小驼峰（button的onclick事件要改成onClick），value是jsx传递一个函数。

 

2.如果是自定义组件:

随便写key=value，子组件通过this.props去取值即可。

注意:jsx的props实在是太牛了，使用{}语法后，除了传递基本的字符串、数字、数组、对象、函数，还可以传递react元素。

当然了，给原生html元素肯定也可以什么都传，但是原生html元素又不做处理。