React-2 JSX知识

目录

一、JSX语法

1、定义虚拟dom时不要用引号

2、标签中引入js表达式要用{}

3、如果在jsx要写行内样式需要使用style={{color：red}}样式

4、样式的类名指定不能写class，要写className

5、只有一个根标签

6、标签必须闭合

7、标签首字母

二、基本使用

1、createElement方法：过于繁琐不建议使用

2、JSX方法：

三、JSX中使用JS表达式

四、条件渲染

五、列表渲染

六、样式处理

1、行内样式style

2、类名 className(推荐)      

---

一、JSX语法

1、定义虚拟dom时不要用引号

2、标签中引入js表达式要用{}

3、如果在jsx要写行内样式需要使用style={{color：red}}样式

4、样式的类名指定不能写class，要写className

5、只有一个根标签

6、标签必须闭合

7、标签首字母

（1）若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
（2）若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

注意：jsx的样式命名采用驼峰命名法，如果为两个单词，第二个单词的首字母要大写

二、基本使用

1、createElement方法：过于繁琐不建议使用

React.createElement("div",{id:"d1",className:"item"}
                                 React.createElement("ul",null
                                 React.createElement("li",null,"ok"),
                                 React.createElement("li",null,"yes"),
                                 React.createElement("li",null,"no"))),
)

注意：该方法繁琐、不直观、不优雅、体验感差，不推荐使用 

2、JSX方法：

<div id="d1" class="item">
    <ul>
         <li>ok</li>
         <li>yes</li>
         <li>no</li>
    </ul>
</div>

注意：<1>JSX：javascript xml 

           <2>JSX是React的核心内容

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

（1）使用JSX创建react元素

const title=<h1>123</h1>

（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样式表