React:JSX 深入
Posted 瓶子2333
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)}.
这几条记住就可以了。
以上是关于React:JSX 深入的主要内容,如果未能解决你的问题,请参考以下文章
使用 Firebase HTTP 函数(Firebase、Stripe OAuth、React (JSX) 前端)将授权代码返回到 Stripe