React-2 JSX知识

注意：<1>JSX：javascript xml 

           <2>JSX是React的核心内容

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

（1）使用JSX创建react元素

const title=<h1>123h1>

（2）原理

   <1>babel进行编译，转换成js对象，用ReactDom。

   <2>render()方法将这个对象转成DOM元素，最后插入页面

（3）注意

   <1>第一点

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

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

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

   <2>第二点

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

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

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

三、JSX表达式

//js表达式
let ok=123;
const text=(
    <p>{ok}p>
)

//数字相加运算
let ok = (
       <div>
            <h1>欢迎学习h1>
            <h2>{1+1}h2>
        div>
)

//不同类型结合运算
let time = new Date().toLocaleTimeString();
let str = '当前时间是：'
let element = (
  <div>
     <h1>学习h1>
     <h2>{str+time}h2>
  div>
)

//三元表达式
let man = "发热"
let ok = (
  <div>
    <h1>今天是否学习h1>
    <h2>{man === "摆烂?"学习":"躺平"}h2>
  div>
);
 

//元素渲染
let man = "发热"
let ok = (
  <div>
    <h1>今天是否隔离h1>
    <h2>{man === "发热"?<button>隔离button>:<button>躺床上button>}h2>
  div>
);

//嵌套JSX
let ok = (
  <div>
    <span>横着躺span>
    <span>竖着躺span>
  div>
)
let man = "不发热"
let ok1 = (
  <div>
    <h1>今天是否隔离h1>
    <h2>{man === "发热"?<button>隔离button>:ok}h2>
  div>
);

四、条件渲染

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

let is = ture;
const ok = () => {
    if (is) return (<div>学习react全家桶div>)
    return (<div>一定要坚持学习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样式表