React学习——JSX的使用

最新推荐文章于 2024-10-07 23:01:54 发布

lizzvia

最新推荐文章于 2024-10-07 23:01:54 发布

阅读量418

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/u013237862/article/details/72858137

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引子：最近因为工作需要学习React，发现Vue和React都是围绕着JSX做文章，因此记录本篇文章，对JSX做一个小总结(本篇是以React为视角)。

简介：JSX使用xml的方式直接定义界面，界面组件之间可以相互嵌套。JSX在本质上是一个语法糖，并不是html标准。因此在使用的时候，需要引入bable的jsx解释器，然后经过babel解析为js之后才能使用。最终JSX被解析为React.createElement(components，props，...children).

语法：类似于XML，遇到{}解析为javascript语法，遇到< 解析为html语法。

<div className="bar-content">
     <ul className="ul-content">
         {this.props.comments.map(comment=>{
             return <li>comment.content</li>
  })}
     </ul>
</div>

规则：

1、使用JSX必须在React的scope中：由于JSX最终被翻译为React.createElement(component, proprs, ...children); 所以使用JSX 必须包含react lib。否则无法解析。

2、自定义的标签必须已大写字母开头：在JSX解析的过程中，标签如果是小写，会被认为是内置的标签，按照html标准来解析。如果是大写，将被翻译为createElement。如果自定义的标签小写，将会报错。

3、如果想要在jsx使用一般的表达式，需要将其赋值给一个已大写字母开头的常量，然后再在JSX中使用。不过如果.能直接访问到的话，可以直接使用.

const Components = {
   datePicker: function(props) {
       return <h1>{props.date}</h1>
   }
}

ReactDom.render(<Component.datePicker date={new Date.getDate()} />, document.getElementById("app"));

const component = {
   photo: photoStory,
   video: videoStroy
}

function story(props) {
   const StoryComponent = component[props.type];

   return <StoryComponent />
}

4、class要写为className，for要写为htmlFor。因为class和for是html的关键字。style要写为style={{}},其中第一对括号是js语法解析的标志。类似于margin-top的属性要使用驼峰写法

5、if和for不是javascript语法，所以不能直接在JSX中使用if。如果要使用，需要把if和for放到外层。例：

function NumberDes(props) {
  let description;

  if(props.number %2 == 0){
      description = <strong>even<strong>
  }else{
      description = <i>odd</i>
   }

   return <div>{props.number} is a {description} </div>
}