精华内容
下载资源
问答
  • JSX语法

    2021-04-16 08:14:04
    什么是JSX语法 JSX语法里面,有两类标签 第一种标签:普通的html标签 例如: <p></p> <div></div> 第二种标签:组件标签 例如:(组件标签首字母必须是大写的) <App /> <Test

    前言

    以前传统在html中写html标签

    var root = document.getElementById('root')
    root.append('<div>hello world</div>')
    

    什么是JSX语法

    JSX语法里面,有两类标签
    第一种标签:普通的html标签
    例如:

    <p></p>
    <div></div>
    

    第二种标签:组件标签
    例如:(组件标签首字母必须是大写的)

    <App />
    <Test />
    

    JSX

    全称:JavaScript XML
    XML早期用于存储和传输数据

    TOM
    19

    不过JSON比起简单
    “{“name”:“TOM”,“age”:“19”}”
    JSON的好用的方法:
    parse 快速将json中的字符串解析成json对应的js数组和对象
    stringfy 快速将js数组和对象中的内容转换成json字符串

    jsx语法规则

    const myId = 'aTgUiGU'
    const myData = 'HelLo,rEact'
    // 1.创建虚拟dom // 此处不要写引号
    const VDOM =(
      <div>
        <h2 className='title' id={myId.toLowerCase()}>
          <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>  
        </h2>  
        <input type="text" />
        <good></good><Good></Good>
      </div>
    ) 
     // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM,容器) 
    ReactDOM.render(VDOM,document.getElementById('test'))
    /* 
      JSX 语法规则:
        1.定义虚拟DOM时,不要写引号
        2.标签中混入JS表达式时要用{}
        3.样式的类名指定不要用class,要用className
        4.内联样式,要用style={{key:value}}的形式去写
        5.只有一个根标签
        6.标签必须闭合
        7.标签首字母
          (1)若小写字母开头,则将该标签转为html中的同名元素,若html中无该标签对应的同名元素,则报错
          (2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错
    */
    

    使用React编写TodoList功能

    import React, {
        Component, Fragment
    } from 'react';
    // Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成
    class Text extends Component {
        render() {
            return (
                <Fragment>
                    <input/>
                    <ul>
                        <li>Learn More</li>
                        <li>Learn React</li>
                    </ul>
                </Fragment>
            );
        }
    }
    export default Text;
    

    React中数据驱动的设计思想和事件绑定

    import React, {
        Component, Fragment
    } from 'react';
    // Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成
    class Text extends Component {
    //    constructor函数 在组件创建的第一个时刻自动被执行
        // 类的构造函数
        constructor(props) {
            // 固定式写法
            super(props);
            // 在组件中创建两个数据,一定定义在state中
            this.state = {
                inputValue: 'hello',
                list:[]
            };
        }
         handleInputChange(e) {
             // 要想改变某个值 就可以用setState 对某个数据进行变更
             this.setState({
                 inputValue: e.target.value
             });
         }
        render() {
            return (
                <Fragment>
                    {/* 做双向数据绑定  */}
                    {/* onChange对应的this不是它本身的this 所以用bind(this)转为本身的this */}
                    <input value={this.state.inputValue}
                    onChange={this.handleInputChange.bind(this)}/>
                    <ul>
                        <li>Learn More</li>
                        <li>Learn React</li>
                    </ul>
                </Fragment>
            );
        }
    
    }
    
    export default Text;
    

    一定注意区分 : 【js语句(代码)】与【js表达式】
    1. 表达式:有一个表达式会产生一个值,可以放在任何一个需要值的地方
    下面这些都是表达式:
    (1) a
    (2) a+b
    (3) demo(1)
    (4) arr.map() 循环遍历数组
    (5) function test(){}
    2.语句(代码):
    下面这些都是语句(代码)
    (1) if(){}
    (2) for(){}
    (3) switch(){}

    //  模拟一些虚拟数据
        const data= ['Angular','React','Vue']
        // 1. 创建虚拟DOM
        const VDOM = (
          <div>
            <h1>前端js框架列表</h1>
            <ul>
              {
                data.map((item,index)=>{
                  return <li key={index}>{item}</li>
                })
              }  
            </ul>  
          </div>
        )
        // 渲染虚拟DOM页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    
     function demo(index){
          console.log(1);
          return 2
        }
        console.log(demo(1));
    
    展开全文
  • jsx语法

    2017-03-29 20:10:33
    jsx语法 jsx的官方定义是xml语法的ECMAScript扩展。react官方早期为jsx语法开发了一套编译器JSTransform,目前已经不再维护,全部采用Babel的jsx编译器实现。jsx的基本语法1.1. xml基本语法标签可以任意嵌套,可以...

    jsx语法

    jsx的官方定义是xml语法的ECMAScript扩展。react官方早期为jsx语法开发了一套编译器JSTransform,目前已经不再维护,全部采用Babel的jsx编译器实现。

    1. jsx的基本语法

      1.1. xml基本语法

      标签可以任意嵌套,可以像HTML一样清晰的看到DOM树状结构及其属性。比如我们构造一个List组件:

      const List=()=>(
          <div>
              <Title>this is title</Title>
              <ul>
                  <li>list item</li>
                  <li>list item</li>
                  <li>list item</li>
              </ul>
          </div>
      );

      注意:

      • 定义标签时,只允许被一个标签包裹。
      • 标签一定要闭合

      1.2 元素类型

      • DOM元素 首字母小写
      • 组件元素 首字母大写

      1.3 注释

      在html中注释写成这样的形式,但在jsx中并没有定义注释的转换方法,仍然可以使用jacascript的注释方法,在一个组件的子元素位置使用注释需要用{}包起来,实例:

      const App=(
          <Nav>
               {/*节点注释*/}
               <Person>
                  /*多行
                  注释
                  */
      
               </person>
          </Nav>
      );

      在html中有一类特殊的注释就是条件注释,常用于判断浏览器的版本:

      <!--[if IE]>
      <p>work in ie</p>
      <![endif]-->

      上述方法可以使用javascript代替

      {
          (!!window.ActiveXObject||'ActiveXObject' in window)?<p>work in ie</p>:''
      }
      • DOCTYPE是一个非常特殊的标志,在html中这个标签没有闭合的。

      1.4 元素的属性

      • DOM元素的属性
        DOM元素的属性是标准规范属性,有两个列外class和for,class属性改为className,for属性改为htmlFor
      • 组件元素的属性是完全自定义的属性,也可以理解为组件所需要的参数
      • Boolean属性
        省略Boolean会导致jsx认为bool值设为true,要传false,必须使用属性表达式。常用于表单元素中,比如disable,require,checked readOnly等
      • 展开属性 如果事先知道组件需要的全部属性,可以使用es6写

        const data={name:'foo',value:'bar'};
        const component=<Component name={data.name} value={data.vale} />
      • 也可以写成

      const data={name:'foo',value:'bar'};
      const component=<Component {...data} />
      
      • 自定义html属性
        如果在jsx中往DOM元素中传自定义属性,react是不会渲染的,如果要是用html自定义属性,要使用data-前缀,在自定义标签中任意属性都是被支持的.

      1.5. javascript属性表达式
      属性值要使用表达式,只要用{}替换”“即可:

      //输入(jsx):
      const person=<Person name={window.isLoggedIn?winsow.name:''} />;
      //输出(javascript)
      const person=React.createElement(Person,{name:window.isLoggedIn?window.name:''});

      子组件也可以作为表达式使用

      1.6. HTML转义
      react会将所有要显示到DOM的字符串转义,防止XSS.所以,如果JSX中含有转义后的实体字符,比如©,则DOM中不会正确显示,因为react自动把©中的特殊字符转义。
      有几种解决办法:

      • 直接使用utf-8字符
      • 使用Unicode编码查询编码
      • 使用数组封装
        {[‘cc’,&copy,’2015’]}
      • 直接插入原始的HTML
    展开全文
  • JSX 语法

    2019-09-30 17:50:08
    jsx 是Facebook专门为react发明的一种新的类似于XML格式的语言,它是JavaScipt的语法拓展。它使用XML标记的方式去直接声明界面,然后再利用编译器转换成JS语言。 jsx 的优点: jsx 在渲染的时候输出的虚拟dom,...

    jsx 是Facebook专门为react发明的一种新的类似于XML格式的语言,它是JavaScipt的语法拓展。它使用XML标记的方式去直接声明界面,然后再利用编译器转换成JS语言。

    jsx 的优点:

    • jsx 在渲染的时候输出的虚拟dom,所以jsx执行更快
    • 类型安全,在编译过程中就能发现错误
    • 使用jsx编写模板更加快速

    JSX 基本语法

    1. 定义标签时,只允许被一个标签包裹

    2. 标签一定要闭合

    3. 在HTML中,注释写成 <!-- 注释 -->这样的形式,在JSX中依然可以使用这个方法使用注释,但要注意的是,在一个组件的子元素位置使用注释要用 {} 包起来

            {/* 注释 */}
    {
    //单行注释 }

    4. DOM 元素的属性是标准规范属性,但有两个例外——class 和 for,这是因为在 JavaScript 中这两个单词都是关键字。因此,我们要将class属性改为className,for 属性改为HTMLFor。

    5. 如果在输入框中输入HTML标签,不想被转义,可以这样做:

    import React,{Component} from 'react';
    
    class App extends Component {
      render(){
        let content = "<h1>内容</h1>"
        return (
          <div dangerouslySetInnerHTML={{__html: content}}></div>
        );
      }
    }
    export default App;

    6. JSX 中使用JavaScript表达式,表达式写在花括号 {} 中

    7.JSX 绑定属性值

    8. JSX 绑定style属性

    9. JSX占位符:在JSX中返回的内容都必须包含在一个大的标签内,所以我们必须在最外边套一层div,如果我们不希望页面渲染这层div的话就要使用占位符Fragment

    import React,{Component, Fragment} from 'react';
    
    class App extends Component {
      render(){
        return (
          // jsx 占位符
          <Fragment>
            {/* JSX绑定style属性 */}
            <div style={{color:'red', margin:'0 auto'}}></div>
            {/* JSX绑定属性值 */}
            <img src={imgUrl}></img>  
          </Fragment>
        );
      }
    }
    export default App;

    注意:

    • 使用JSX一定要引入react
    • 组件的首字母一定要大写

     

    转载于:https://www.cnblogs.com/ly2019/p/11210407.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,205
精华内容 1,682
关键字:

jsx语法