React-2（JSX）

目录

一、基本使用

1、使用JSX创建react元素

2、原理

3、注意

二、JSX中使用JS表达式

三、条件渲染

四、列表处理

五、样式处理

1、行内样式style

2、类名 className(推荐)

---

JSX：javascript xml

JSX是React的核心内容

React完全利用JS语言自身的能力来编写UI，而不是增强HTML功能

一、基本使用

1、使用JSX创建react元素

const title=<h1>123</h1>

2、原理

babel进行编译，转换成js对象，用ReactDom。render()方法将这个对象转成DOM元素，最后插入页面

3、注意

3.1、注意1

JSX不是ES的标准语法，它是ES的语法拓展

需要使用babel编译处理后才能再浏览器环境中使用

编译JSX的包：@babel/preset-react

3.2、注意2

React元素的属性名使用驼峰命名法

如果元素没有子节点，可直接使用单标签，但是以/>结尾

可以使用（）包裹JSX，以避免一些问题

二、JSX中使用JS表达式

语法：{JS表达式}

let ok=123;
const text=(
    <p>{ok}</p>
)

三、条件渲染

可以使用if、 三元运算符、逻辑运算符

let is = ture;
const ok = () => {
    if (is) 
    return (<div>aaa</div>)
    return (<div>bbb</div>)
}

四、列表处理

使用数组的map方法

const books = [
  { id: 1, name: '西游记', author: '吴承恩' },
  { id: 2, name: '水浒传', author: '施耐庵' },
  { id: 3, name: '红楼梦', author: '曹雪芹' },
  { id: 4, name: '三国演义', author: '罗贯中' },
]
const list = (
  <ul>
    {books.map(item => (<li key={item.id}>书名：{item.name},作者：{item.author}</li>))}
  </ul>
)

五、样式处理

1、行内样式style

const title=<h1 style={{width:"200px",height:"100px"}}>你好</h1>

注意：不是两组花括号，外边代表的是js。里边代表的是对象

2、类名 className(推荐)

使用import导入css样式表