React高级教程(es6)——(1)JSX语法深入理解

简介:从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成:
React.createElement(component, props, …children)的形式,比如:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译结果:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

当然,你也可以使用自闭和的形式:

<div className="sidebar" />

可以得到相同的编译结果。

1.指定React元素的类型

JSX标签的头部,决定了React元素的类型,大写的标签,意味着JSX的标签与React的组件一一对应,比如

<Foo/>标签就对应了Foo组件

(1)必须包裹在一定的范围内

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

比如这样,引入了2个组件,构成了一个新的组件WarningButton,组件的返回值的元素,必须包含在一定范围内,这里通过函数的’{ ‘, ’ } ‘实现包裹的效果。

(2)用户定义的组件必须大写

我们前面已经说过,JSX的标签与组件是一一对应的,当我们使用JSX语法,引用组件的时候,标签必须要大写(同时定义组件的函数名也必须是大写的)。

function Hello(){
   return <h2>Hello,World</h2>
}
//定义过程
<Hello/>
//使用过程

(3)不能在运行期间,动态的选择类型
我们不能在JSX中,动态的规定组件的类型,举例来说:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  return <components[props.storyType] story={props.story} />;
  //这样写是不对的,我们在返回的组件中,动态定义了组件,这种动态的定义是无效的
}

应该改写为:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {

  const SpecificStory = components[props.storyType];
  return < SpecificStory  story={props.story} />;
    //这样就是正确的,我们不要在JSX的标签中使用动态定义
}

2.JSX中的Props属性

(1)JS表达式
可以通过{},包裹js的语法来使用。比如:

<MyComponent foo={1 + 2 + 3 + 4} />

等价于:

<MyComponent foo={10} />

如果不是js表达式,则不能包裹在{}中使用。

(2)Props属性的默认值
Props上的属性可以有默认值,并且默认值为true,比如:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

上面这两个式子是等价的,但是不推荐使用默认值,因为在ES6的语法中{foo}代表的意思是:{foo:foo}的意思,并不是{foo:true}。

(3)扩展属性
可以通过ES6的…方法,给组件赋属性值,例如:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

上面的这两种方式是等价的。

3.JSX中的children

(1)children中的function

我们来考虑自定义组件中包含函数的情况:

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

那么何时调用这个children中的方法呢?

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

我们从上述的Repeat组件的定义中可以看出来,children中的方法按此定义会一直执行10次。

(2)忽略Boolean,Null以及Undefined

false,null,undefined以及true是不能通过render()方法,呈现在页面上的,下面的这些div块的样式
相同,都是空白块:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{true}</div>

这种属性,在通过render呈现元素的时候,是十分有用的,比如我们只想在div元素中展现Head组件,
例子如下:

<div>
  {showHeader && <Header />}
  <Content />
</div>

这里的逻辑是,只有showHeader==true,在会在页面呈现Header组件,否则为null,即为不显示任何东西,这相当于一个if的判断了。

再举一个例子:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

在这个div中,我们需要知道的是即使元素为0,0是能够呈现在页面中的。也就是说上述代码中,只要
props.messages数组存在,不管长度是否为0都是存在的。(这里不同于js,js中的语法认为0==false)

(3)如何显示Null,Undefined和Boolean

如果我们一定要再页面上显示Null等,可以将其先转化为字符串之后再显示。

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

通过String的转化后就能在页面上显示了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值