JSX语法

最简单的一段jsx

xxxxxxxxxx
<h1>Hello, baizhan</h1>

在JSX中嵌入表达式

在{}大括号内放置任何有效的 JavaScript 表达式

xxxxxxxxxx
const name = 'baizhan!';
const element = <h1>Hello, {name}</h1>;

总结：遇到 <> 按照HTML解析，遇到 {} 按照JavaScript解析

JSX中指定属性

如果是静态值，则直接使用引号，如果是动态值，则使用{ js表达式 }

xxxxxxxxxx
const element = <img src="http://iwenwiki.com/api/newworld/images/n1.png"></img>;

xxxxxxxxxx
const avatarUrl='http://iwenwiki.com/api/newworld/images/n2.png'
const element = <img src={avatarUrl}></img>;

JSX子元素嵌套

xxxxxxxxxx
 <div>
    <h1>Hello!</h1>
    <h2>百战</h2>
  </div>

实时效果反馈

1. 下列关于JSX描述错误的是：

A JSX中使用js表达式要用{}包起来

B JSX可以嵌套

C JSX中元素的属性可以是一个字符串

D JSX中的js表达式外面要加引号

答案

1=>D