React 入门(二)

JSX介绍

const element = <h1>Hello, world!</h1>;

以上述代码为例,React 中推荐使用 JSX 来描述用户界面。
JSX 是一种 Javascript 的语法扩展,是一种嵌入式的类似 XML 的语法。 它可以被转换成合法的 JavaScript,尽管转换的语义是依据不同的实现而定的。
JSX 最终会被转化成 javascript 对象,因而我们可以在 if 或者 for 语句里使用 JSX,赋值给变量,最为函数参数或者作为函数返回值。

在JSX中使用javascript表达式

JSX 中支持使用 javascript 表达式,使用{}括住。例如:

function checkNameExits(name) {
  return name?name:"world";
}
const name = "abc";
const element = (
  <h1>
    Hello, {checkNameExits(name)}!
  </h1>
);

JSX 定义节点属性

在JSX中可以为需要创建的html节点设置默认属性值,使用引号来定义以字符串为值的属性,使用大括号定义以javascript为值的属性。

const element = <div id="div1"></div>;
const element = <div id={user.id}></div>;

JSX 嵌套

JSX 可以定义一段准备渲染的完整 html 片段。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值