小公司如何做网站隔离,网站内容优化,html5视频播放器 js,广州番禺网站制作为什么要用 JSX#xff1f; JSX 给 HTML 赋予了 JS 的编程能力 JSX 的本质 JSX 是 JavaScript 的语法扩展#xff0c;浏览器本身不能识别#xff0c;需要通过解析工具#xff08;如babel#xff09;解析之后才能在浏览器中运行。
bable 官网可以查看解析过程 JSX 的语法 … 为什么要用 JSX JSX 给 HTML 赋予了 JS 的编程能力 JSX 的本质 JSX 是 JavaScript 的语法扩展浏览器本身不能识别需要通过解析工具如babel解析之后才能在浏览器中运行。
bable 官网可以查看解析过程 JSX 的语法 {} 中写 JS 表达式
类似 vue 的 {{}}
渲染 JS 数据
对象
div style{{ color: red }}朝阳/div其他类型的数据也能直接渲染但基本不会使用。
渲染变量
function Demo() {const name 朝阳;return (div{name}/div/);
}export default Demo;调用函数
function getName() {return 朝阳;
}function Demo() {return (div{getName()}/div/);
}export default Demo;调用方法
div{new Date().getDay()}/div添加注释
{/* 我是一段注释 */}条件渲染 if
类似 vue 的 v-if
单分支
function Demo() {const showName true;return {showName div朝阳/div}/;
}双分支 三元运算符 ?:
function Demo() {const login false;return {login ? div朝阳/div : button登录/button}/;
}多分支 调用内含 if 的函数
单分支和双分支也能使用只是麻烦了些。
const type 2;function getTypeName() {if (type 1) {return div生活/div;} else if (type 2) {return div学习/div;} else if (type 3) {return div工作/div;}
}function Demo() {return {getTypeName()}/;
}export default Demo;若分支特别多也可以使用 Switch 语句。
const type 3;function getTypeName() {switch (type) {case 1:return div生活/div;case 2:return div学习/div;case 3:return div工作/div;default:break;}
}function Demo() {return {getTypeName()}/;
}export default Demo;列表渲染 map
类似 vue 的 v-for
必须设置独一无二的 key且不能是 index 和随机数通常用 idkey 能提升 react 更新渲染的性能map 内箭头函数的返回值用 () 包裹
function Demo() {const list [{id: 1,name: 朝阳,},{id: 2,name: 晚霞,},];return (ul{list.map((item) (li key{item.id}{item.name}/li))}/ul/);
}export default Demo;朝阳晚霞
绑定事件
类似 vue 的 v-on 简写
以 on 开头接首字母大写的事件名如点击事件 onClick
function Demo() {function hello() {alert(你好);}return (button onClick{hello}问好/button/);
}export default Demo;获取事件对象 e
此处的e 是一个React 定义的已解决了跨浏览器的兼容性问题的合成事件。vue中是原生事件通过 e.nativeEvent 可获取原生事件
function Demo() {function hello(e) {console.log(e);}return (button onClick{hello}问好/button/);
}自定义事件传参
需使用箭头函数否则便是调用函数会在页面加载时立马执行。
function Demo() {function hello(name) {alert(你好 name);}return (button onClick{() hello(朝阳)}问好/button/);
}export default Demo;此时要想获取事件对象 e需在箭头函数传入参数e
function Demo() {function hello(name, e) {console.log(你好 name);console.log(e);}return (button onClick{(e) hello(朝阳, e)}问好/button/);
}export default Demo;添加样式
行内样式【不推荐】
div style{{ color: red }}你好/div类样式
样式写在单独的如与组件同名的css 文件中通过 import 导入样式通过 className 属性添加样式注意不是 class
src\Demo.css
.red {color: red;
}src\Demo.jsx
import ./Demo.css;const Demo () {return div classNamered你好/div;
};export default Demo;
