React JSX
React笔记
JSX的优点
- JSX 执行更快, 因为它在编译为 JavaScript 代码后进行了优化
- 它是类型安全的, 在编译过程中就能发现错误
- 使用 JSX 编写模板更加简单快速
标识符像 class 和 for 不建议作为 XML 属性名 作为替代 React DOM 使用 className 和 htmlFor 来做对应的属性
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.sdq{
float: left;
heigh: 50px;
width: 50px;
}
</style>
<body>
<div id="root"></div>
<script type="text/babel">
{}
const element = <h1 className="sdq">我叫史迪奇</h1>;
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
|
使用 JSX
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>史迪奇</h1>
<h2>安琪</h2>
{/* 添加自定义属性需要使用 data- 前缀 */}
<p data-myattribute = "somevalue">鲁本</p>
</div>
,
document.getElementById('example')
);
</script>
</body>
|
独立文件
React JSX 代码可以放在一个独立文件上
<body>
<div id="example"></div>
<script type="text/babel" src="sdq.js"></script>
</body>
|
逻辑运算
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>
{/* 逻辑运算 表达式写在花括号 {} */}
<h1>https://sdq{1+2}.gitee.io</h1>
</div>
,
document.getElementById('example')
);
</script>
</body>
|
JSX 中不能使用 if else 语句, 但可以使用 conditional (三元运算) 表达式来替代
<body>
<div id="example"></div>
<script type="text/babel">
var i = 3;
ReactDOM.render(
<div>
<h1>{i == 3 ? 'True!' : 'False'}</h1>
<h1>{i != 3 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
</script>
</body>
|
数组
<body>
<div id="example"></div>
<script type="text/babel">
{}
var arr = [
<h1>史迪奇</h1>,
<h2>安琪</h2>,
<h3>鲁本</h3>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>
</body>
|
作者: 我叫史迪奇
本文来自于:
https://sdq3.link/React-JSX.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议