元素渲染
- ReactDOM
render接收两个参数,一个jsX语法的节点模板,一个是渲染到那个元素对象上(会成为其子节点)
<script type="text/babel">
const element = (
<h1>hello React</h1>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
- 通过其他任何方式获得jsx语法的模板给render函数即可:
<script type="text/babel">
function fn() {
//当然,通过变量返回也是可以的,多种多样
return <div>
<h1>Hello React by return</h1>
</div>
}
const element = fn();
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
//或者这样,注意,return后面没有东西就什么都不返回了,直接结束,因为js没有那么严格的分号结束机制;
<script type="text/babel">
function fn() {
return (
//js注释
<div>
{/*jsx注释*/}
<h1>Hello React by return</h1>
</div>
)
}
const element = fn();
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
注释
- 如果是在节点外,属于js语法,在节点模板内,属于jsx语法:
<script type="text/babel">
const element = (
//单行注释
/* 多行注释 */
<div>
//单行注释
/* 多行注释 */
<h1>
hello React
</h1>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
- 结合插值符号“{ }”写注释:
<script type="text/babel">
const element = (
//单行注释
/* 多行注释 */
<div>
{
//单行注释
/* 多行注释 */
}
<h1>
hello React
</h1>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
当然,为了好看,你可以格式化一下插值符号里的注释结构:
{/*单行注释内容*/}
{//错误的注释,斜杠会把后面的反大括号注释掉,然后匹配到函数或者对象的反大括号造成错误}
{/*
多行注释内容
* @Author: Ouyang
* @Date: 2018-10-21 18:15:50
* @Last Modified by: Ouyang
* @Last Modified time: 2018-10-21 18:15:50
*/}
插值
- 利用插值符号:
<script type="text/babel">
let person = {
name:"小明",
age:"18",
sex:"男"
}
const element = (
<div>
<h2>姓名:{person.name}</h2>
<h2>年龄:{person.age}</h2>
<h2>性别:{person.sex}</h2>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
- 在插值符号里使用函数:
<script type="text/babel">
var Person = function(name,age,sex) {
this.name = name,
this.age = age,
this.sex = sex,
this.getName = function(){
return this.name
},
this.getSex = function() {
return this.sex
}
}
let newPerson = new Person("小红","18","女");
const element = (
<div>
<h2>姓名:{newPerson.getName()}</h2>
<h2>年龄:{newPerson.age}</h2>
<h2>性别:{newPerson.getSex()}</h2>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
- 在插值符号里使用三目运算符:
<script type="text/babel">
var Person = function(name,age,sex) {
this.name = name,
this.age = age,
this.sex = sex,
this.getName = function(){
return this.name
},
this.getSex = function() {
return this.sex
}
}
let newPerson = new Person("小红","18",1);//有些后台用0 1表示性别更加方便
const element = (
<div>
<h2>姓名:{newPerson.getName()}</h2>
<h2>年龄:{newPerson.age}</h2>
<h2>性别:{newPerson.getSex()==1?"女":"男"}</h2>//完全可以插入三目运算符,但是可惜的是,这里不能直接写函数体,也不能用if判断等
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
- 但是可以在插值符号里写闭包自执行函数:
<script type="text/babel">
var Person = function(name,age,sex) {
this.name = name,
this.age = age,
this.sex = sex,
this.getName = function(){
return this.name
},
this.getSex = function() {
return this.sex
}
}
let newPerson = new Person("小红","18",1);
const element = (
<div>
<h2>姓名:{newPerson.getName()}</h2>
<h2>年龄:{newPerson.age}</h2>
<h2>性别:{
(function(sex) {
if(sex == 1){
return "女,1"
}else{
return "男,2"
}
})(newPerson.getSex())
}</h2>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
)
</script>
这样我们就可以根据需要将数据渲染到对应节点里,而且通过函数等,不管是准备的静态数据,还是请求的动态数据,都可以较好的渲染进元素里!