📒REACT笔记👉👉👉深入JSX

其实,JSX语法只是React.createElement(component, props, ...children)的语法糖,比如我们下面的代码:

1
2
3
<DangerButton classname='dange_button'>
  内容区域
</DangerButton>

使用babel编译后会变成下面的代码:

1
2
3
4
5
React.createElement(
  DangerButton,
  {classname: 'danger_button'},
  '内容区域'
)

了解了JSX只是语法糖以后,就可以解释这样一个问题了,在很久很久以前也有人问过我「为什么我们在一个JSX文件内,都没用到React这个API,却必须写上这么一句」:

1
import React from 'react'

因为我们编译后用到了React.createElement,所以React必须在作用域内。如果我们使用script标签的形式引入React,必须把React挂载到全局变量上才可以。

JSX语法还是有一些点需要注意的,这里暂时只列出来对本来说需要注意的。第一点就是JSX标签的类型不能是JavaScript表达式,什么意思?用代码来演示一下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import React from 'react';
import { PhotoStory, VideoStory } from './stories';

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

function Story(props) {
  // 错误!JSX 类型不能是一个表达式。
  return <components[props.storyType] story={props.story} />;
}

我们可以把表达式赋值给一个变量解释这个问题:

1
2
const Component = components[props.storyType];
return <Component story={props.story}>

这一节没啥说的.....

拜拜👋

updatedupdated2020-07-062020-07-06