React 语法基础之表达式和jsx
Posted 平凡是最美荡气回肠
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 语法基础之表达式和jsx相关的知识,希望对你有一定的参考价值。
react负责逻辑控制 reactdom负责渲染 本节知识点 有 1)变量的使用,简单使用。 1==》jsx中的注释 {/* */} 2===》 简单的渲染 app.js ps==>定义变量 使用变量 import React from ‘react‘; function App() { const namet="我是表头";//定义变量 return ( <div> {/*我是注释 下面使用变量 它是表达式 */} {namet} </div> ); } export default App;
03==> jsx 里面支持出绝大多数的js 你当jsx当做js就好了 04==》在表达式{ }里面不要去写for循环和if else哈 05==》在表达式里面去调用函数 import React from ‘react‘; function getsay(a,b){ return a+b; } function App() { return ( <div> {/*我是注释 下面使用变量 它是表达式 */} {getsay(10,20)} </div> ); } export default App;
06===>属性也是表达式 {/* 属性也是表达式 */} <img src={login} title="我是图" style={{width:‘50px‘}}/> 完整代码如下 import React from ‘react‘; import login from "./logo.svg" //导入图片 function App() { return ( <div> {/* 属性也是表达式 */} <img src={login} title="我是图" style={{width:‘50px‘}}/> </div> ); } export default App;
07==>jsx也是表达式 import React from ‘react‘; import login from "./logo.svg" const jsx=<p>我是p</p> function App() { return ( <div> {/* 属性也是表达式 */} <img src={login} title="我是图" style={{width:‘50px‘}}/> {/* js也是表达式 */} {jsx} </div> ); } export default App; 总结==》属性也是表达式 jsx也是表达式
以上是关于React 语法基础之表达式和jsx的主要内容,如果未能解决你的问题,请参考以下文章