目录
一、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样式表