React:JSX 深入

React入门的的时候，我们（我自己啦）喜欢都跟着例子来，用标签的语法写JSX，比如：<Mycomponent key={this.props.id} onClick={this.props.doSth} ></Mycomponent >

觉得真是在js里写html。

现在文档告诉我们，JSX这种写法呀，其实是React.createElement(component, props, ...children)的语法糖，就好像类是创建对象的语法糖一样。

三个参数分别是其类型、属性、子元素。子元素部分可以是嵌套的数组、对象或文本。如果没有子元素，其JSX语法可以直接写成<Mycomponent />

1.无论是JSX语法还是createElement函数，Mycomponent这个名字在当前作用域必须可见，否则无法解析。

2.JSX语法允许类js对象的点语法：

1 const MyComponents = {
2   DatePicker: function DatePicker(props) {
3     return <div>Imagine a {props.color} datepicker here.</div>;
4   }
5 }

如上，当一个模块当中包含多个组件的定义时，如果我们想取用其中的某个组件，可以用<MyComponents.DatePicker /> 来调用组件。毕竟MyComponents是以对象形式来聚合各个组件的定义的。这种方式也方便我们按类型/功用将组件进行分类。

3.用户自定义的组件要用首字母大写的方式命名，这是推荐的。这方便ianReact将之与原声的html标签区分。按照规范，原生html标签要小写。

4.自定义组件名不能用js表达式/变量，应当在使用如果需要按条件确定使用哪个组件，前先确定组件名再使用它。

 1 const components = {
 2   photo: PhotoStory,
 3   video: VideoStory
 4 };
 5
 6 function Story(props) {
 7   // Correct! JSX type can be a capitalized variable.
 8   const SpecificStory = components[props.storyType];
 9   return <SpecificStory story={props.story} />;
10 }

5.JS表达式可以作为props传给组件，但必须用{}包裹。

6.将字符串当作props传给组件时，下面两种方式等价：

1 <MyComponent message="hello world" />
2
3 <MyComponent message={'hello world'} />

7.当一个变量未赋值却当作props传给组件时，默认为布尔值true。然而这是不推荐的。因为在ES6的对象简写语法把这种情况看作{autocomplete:autocomplete}

1 <MyTextBox autocomplete />
2   //等于
3 <MyTextBox autocomplete={true} />

8.可以用扩展操作符将对象的属性props给组件：

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

然而这是不推荐的，因为可能会把不相关的多余属性传给组件。

9.在自定义组件的开始标签和闭合标签之间的内容，会被当作组件的props.chidlren。

10.JSX会自动清除一行收尾的空白、把多余的空行删掉，并把断行当作一个空格。

11.在自定义组件的标签内部，我们可以通过字符串字面量组合更多（自定义）标签，其实就是用JSX语法来组织。

12.JS表达式作为子内容children的情况：function Hello(props) { return <div>Hello {props.addressee}!</div>; }

文档给的例子都是作为标签内部的文本。

13.函数也可以作为子内容children：

1  return (
2     <Repeat numTimes={10}>
3       {(index) => <div key={index}>This is item {index} in the list</div>}
4     </Repeat>
5   );

代码第三行本身是一个数组，在{}中，用函数将它映射为一组html元素。所以，“函数作为子内容”本质上是“函数生成的元素作为子内容”。

14.Booleans, Null, and Undefined Are Ignored

意思是，如果内容为以上的值，将不作显示。

 1 <div />
 2
 3 <div></div>
 4
 5 <div>{false}</div>
 6
 7 <div>{null}</div>
 8
 9 <div>{undefined}</div>
10
11 <div>{true}</div>

以上的结果都是一个空的div，作为js表达式的这几个值都不会被打印出来。

然而，数字0不一样，它会被打印。因此，如果遇到用数组的length来做判断，必须把它转化为布尔值，比如 arr.length>0。

15.如果我们想将js表达式{true|false|null|undefined} 中的这几个值打印出来，就得将它转化为字符，{String(true)}.

这几条记住就可以了。

转载于:https://www.cnblogs.com/alan2kat/p/7476382.html

React:JSX 深入相关推荐

Airbnb React/JSX 编码规范
Airbnb React/JSX 编码规范算是最合理的React/JSX编码规范之一了内容目录基本规范 Class vs React.createClass vs stateless 命名声明 ...
Airbnb-你非常值得学习的 React/JSX 编码风格指南
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:jiahao-c译 https://github.com/jiahao-c/javas ...
【VScode】创建用户代码片段（以React.jsx文件为例）
文章目录一.创建步骤二.相关问题三.怎么在React.jsx文件中使用一.创建步骤点击设置,选择用户代码片段选择新建全局代码片段给你要创建的代码片段命名将所圈住的代码片段取消注释结构 ...
React JSX 实例图解
React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 不需要一定使用 JSX,它有以下优点: JSX 执行更快 ...
React jsx转换成原生JavaScript的一个例子
jsx代码: var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = r ...
React jsx 中写更优雅、直观的条件运算符
在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西.比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_ ...
react 数字转字符_深入浅出 React -- JSX
什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能在 React 中,JSX 仅仅是 React.crea ...
前端战五渣学React——JSX React.createElement() React.ReactElement()源码
最近<一拳超人>动画更新第二季了,感觉打斗场面没有第一季那么烧钱了,但是剧情还挺好看的,就找了漫画来看.琦玉老师真的厉害!!!打谁都一拳,就喜欢看老师一拳把那些上来就吹牛逼的反派打的稀烂, ...
react .jsx文件报错＜xxx/＞is using incorrect casing
.jsx文件报错:is using incorrect casing 一.问题二.解决方法及错误原因三.总结一.问题问题描述:使用webpack构建react项目成功后,页面无法正常渲染,浏览 ...

React:JSX 深入

React:JSX 深入相关推荐

最新文章

热门文章