react中的jsx详细理解
这是官网上的一个简单的例子
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; ReactDOM.render(
element,
document.getElementById('root')
);
从中可以看到:
React.createElement()
调用。<ul title='aa'>
<li>hello</li>
</ul>
这段代码在react里,因为我们使用react的时候都会引入react,因此react会自动解析成
React.createElement('ul',{
title:'aa'
},React.createElement('li',{},'hello'))
这两段代码所表示出来的结果是一样的
由此可以看出,react会将jsx花括号中的内容转化成js代码
这样,
从本质上讲,JSX 只是为 React.createElement(component, props, ...children)
函数提供的语法糖。
因为 JSX 被编译为 React.createElement
的调用,所以 React
库必须在你 JSX 代码的作用域中。
官网建议给组件以大写字母开头的方式命名。如果你已经有以小写字母开头的组件,需要在 JSX 中使用前,将其赋值给以大写字母开头的变量。
因为在react中,组件的引用必须是首字母大写,否则无法达到想要的结果
JSX 中的 props(属性)
属性有以下几种形式
1、你可以传递任何一个用 {}
包裹的 JavaScript 表达式作为 props(属性)
//JavaScript 表达式作为 props(属性)
<MyComponent foo={ + + + } />
2、你可以传入一个字符串字面量作为一个 props(属性)
<MyComponent message="hello world" /> <MyComponent message={'hello world'} />
3、如果你没给 prop(属性) 传值,那么他默认为 true
<MyTextBox autocomplete /> <MyTextBox autocomplete={true} />
4、如果你已经有一个 object 类型的 props
,并且希望在 JSX 中传入,你可以使用扩展操作符 ...
传入整个 props 对象。
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
} function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
JSX 中的 Children(子元素)
1、您可以在开放标签和闭合标签中放入一个字符串,那么 props.children
就是那个字符串。这对于内置很多 HTML 元素时非常有用
<MyComponent>Hello world!</MyComponent>
2、通过使用 {}
包裹,你可以将任何的 JavaScript 元素而作为 children(子元素) 传递
<MyComponent>foo</MyComponent> <MyComponent>{'foo'}</MyComponent>
3、props.children
的值可以是回调函数
// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
let items = [];
for (let i = ; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
} function ListOfTenThings() {
return (
<Repeat numTimes={}>
{(index) => <div key={index}>This is item {index} in the list</div>}
</Repeat>
);
}
4、false
,null
,undefined
,和 true
都是有效的的 children(子元素) 。但是并不会被渲染,下面的JSX表达式渲染效果是相同的,都是空
<div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>
在有条件性渲染 React 元素时非常有用。如果 showHeader
为 true
时,<Header />
会被渲染
<div>
{showHeader && <Header />}
<Content />
</div>
如果本文对您有帮助,请抬抬您的小手,点下右下角的推荐, ^-^,当然如果看了这篇博客对您有帮助是我最开心的事,毕竟赠人玫瑰,手有余香, ^-^,如果这篇博客没有帮助到您,那就只能说一声抱歉啦
最新文章
- Navisworks API 简单二次开发 (自定义工具条)
- WPF MVVM下做发送短信小按钮
- PHP简单文件上传
- 总结一下在ASP.NET中开发网站的一般步骤
- UNIX网络编程-send、recv、sendto、recvfrom详解
- 【hadoop】mapreduce原理总结
- R语言屏幕输出
- [MarsZ]程序猿谈大学之大学应该学好哪些课程
- sql - 查询所有表中包含指定值
- Ubuntu下nginx+uwsgi+flask的执行环境搭建
- react-router 中的history(react中关于后退键的处理用的到)
- 使用Criteria 实现两表的左外连接,返回根对象
- thinkinginjava学习笔记02_对象
- flask websocker
- 2018-2019 ACM-ICPC Pacific Northwest Regional Contest C Contest Setting(DP)
- 20165206 2017-2018-2 《Java程序设计》第二周学习总结
- 【开发工具之eclipse】7、eclipse代码自动提示,eclipse设置代码自动提示
- UVa 1629 切蛋糕(记忆化搜索)
- Alpha冲刺(1/10)——追光的人
- 自己的一个js库
热门文章
- 【201】SeaDAS代码
- 09_多线程下载_获取文件长度&;计算下载范围
- HDU-5540 Secrete Master Plan
- 什么是位、字节、字、KB、MB?
- 基于 Algebird 谈一谈代数数据类型在数据聚合中的应用
- AtCoder Regular Contest 061 DSnuke&#39;s Coloring
- bzoj 3613: [Heoi2014]南园满地堆轻絮【二分+贪心】
- bzoj 1207: [HNOI2004]打鼹鼠【dp】
- 第十七篇 .NET高级技术之XML
- Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding