前端框架_React

2023年9月26日 236次阅读 来源: 104828720

JSX

JavaScript 和 XML 连系的一种语法，
终究经由过程 转化东西 将 JSX 转化成 JS

推荐在 React 中运用 JSX 来形貌用户界面，JSX既不是字符串也不是HTML，而是XML与JS的混合体

JSX语法：
1、许可在JS中誊写XML标签
2、只能有一个顶层元素
3、支撑插值表达式 （壮大）
4、大写字母开首的标签是组件，小写字母开首的标签是html
<Html></Html>组件
<html></html>html标签

插值表达式语法：{表达式}

誊写 JSX 的时刻平常都邑带上换行和缩进，如许能够加强代码的可读性
一样推荐在 JSX 代码的表面扩上一个小括号，如许能够防备 分号自动插进去 的 bug
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
  • 文本插值
<p>{1}</p>            //<p>1</p>
<p>{'xinxin'}</p>     //<p>xinxin</p>
<p>{true}</p>         //<p></p> 
<p>{false}</p>        //<p></p>
<p>{null}</p>         //<p></p>
<p>{undefined}</p>    //<p></p>
<p>{NaN}</p>          //<p>NaN</p>  有正告
<p>{ [1,'ww'] }</p>   //<p>1ww</p>
<p>{ {'bb': 12} }</p> //报错
  • 属性插值
    原文作者：104828720
    原文地址: https://segmentfault.com/a/1190000017762757
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞