美文网首页H5
5、如何使用 jsx语法

5、如何使用 jsx语法

作者: mannysys | 来源:发表于2017-01-01 13:44 被阅读0次

jsx语法是react提供一种长得比较像html标签的一中语法,本质上是跟html标签是有区别的。

我们自定义的组件要是有大写开头命名比如 <HelloMessage /> 这种自定义命名,如果是些小写的话,react会当成是div这种到dom中寻找就会出错,react对大小写是敏感的
在render方法中写jsx语法,使用大括号如:

{this.props.name}     
# 在大括号里只能写求值表达式,不能写if语句这些,但是我们可以把语句包含一个函数中,
# 函数本身返回是一个求值表达式,这样使用并不是一个好的习惯,
# 不过可以把函数独立出来,然后大括号里调用
# jsx标签名命名使用的是驼峰命名,函数名使用的也是驼峰命名

如果我们要使用 html标签中 class html 属性 ,react里jsx语法中需要使用 className htmlFor 来代替的

下面看一下在jsx中添加注释
在子节点中添加注释:

render(){
  return(
    <p
    /*
       在属性中注释
     */
    >Hello, World { 
    /*
       多行注释
    */
    // 单行注释
    }</p>
  )
}

# 样式调用使用方法,react是把样式当做一个个对象处理
<p style={styles}></p>

添加语句判断四种写法

//第一种方法使用三元表达式
render(){
  return(
    <p>{this.props.name ? this.props.name : 'world'}</p>
  )
}
//第二种方法使用变量
getName(){
  if(this.props.name){
    return this.props.name
 }else{
   return 'world';
 }
}
render(){
  var name = this.getName();
  return(
    <p>Hello, {name}</p>
  )
}

//第三种方法是直接在大括号中调用函数,因为函数调用本身是一种表达式
getName(){
  if(this.props.name){
    return this.props.name
 }else{
   return 'world';
 }
}
render(){
  return(
    <p>Hello, {this.getName()}</p>
  )

//第四种是使用比较运算符,如果左边的值是true就直接返回,
//如果是左边值是假false那就一定会返回右边的值
render(){
  return(
    <p>Hello, { this.props.name || 'world' }</p>
  )
#万能函数表达式,在大括号里写函数
#大括号里第一小括号()可以理解成强制求值运算,然后函数后面添加里(this)是调用这个函数然后传入this,这个方法并不建议使用
render(){
  return(
    <p> Hello, 
    {
      (function(obj){
            if (obj.props.name)
                return obj.props.name
            else
                return 'World'
      })(this)
    }  
    </p>

  )


}

非 DOM 属性介绍
react引入里三个非DOM属性
dangerouslySetInnerHTML:在JSX中直接插入HTML代码(插入动态html代码使用,不过这个属性比较危险)
ref:父组件引用子组件
key: 提高渲染性能,就是节点上插入标识

#演示
var rawHTML = {
  __html: "<h1>Hello, World</h1>"
};
#react在处理的时候 ,会读取html代码
React.render(
  <div dangerouslySetInnerHTML={ rawHTML }></div>,
  document.body
)


#如果在组件内部操作p节点,这样引用它,拿到的是虚拟DOM节点
var HelloWorld = React.createClass({
  this.refs.childp   
  render: function(){
    return <p ref="childp"> Hello, World </p>
  }
})

#在同一个组件内,key是不能同的,还有就是如果是列表就一定加入key,不但提高性能
var HelloWorld = React.createClass({
  render: function(){
    return <ul>
        <li key="1">1</li>
        <li key="1">1</li>
        <li key="1">1</li>
    </ul>
  }
})



相关文章

  • 5、如何使用 jsx语法

    jsx语法是react提供一种长得比较像html标签的一中语法,本质上是跟html标签是有区别的。 我们自定义的组...

  • react-jsx

    jsx 是类似 js 模板语法 声明 jsx 使用 jsx jsx 语法 jsx 是 js 的语法扩展,在 jsx...

  • 03.React-Native JSX

    1.什么是JSX: javaScriptXML### 2.JSX的特点### 3.如何使用JSX语法### 4.非...

  • (React)认识React语法

    一、JSX语法 在React中,没有使用HTML标签来绘制UI,而是使用了JSX语法。 当然JSX语法中,也可以嵌...

  • react语法结构

    1.react JSX语法原理 react是函数式编程,使用jsx语法来渲染组件。jsx语法是合法的JavaScr...

  • jsx语法

    什么是jsx语法:就是符合xml规范的js语法(语法格式相对来说,要比HTML严谨) 1、如何启用jsx语法? 安...

  • JSX语法

    一、什么是JSX语法 在js中直接使用html标签,而不是以字符串的形式使用html标签的语法称为JSX语法 二、...

  • 深入React技术栈:初入React世界(2)

    JSX基本语法JSX的官方定义是类XML语法的ECMAScript的扩展。 XML基本语法使用类XML语法好处之一...

  • react 学习笔记 使用 jsx 语法

    react 学习笔记 使用 jsx 语法 概念 JSX 是一种 JavaScript 的语法拓展。我们推荐 rea...

  • React之JSX语法

    JSX 即Javascript XML,它是对JavaScript 语法扩展。React 使用 JSX 来替代常规...

网友评论

    本文标题:5、如何使用 jsx语法

    本文链接:https://www.haomeiwen.com/subject/mocivttx.html