React
关于React
学习内容我已经上传到github
上了,如果需要的话自行下载Github
react 数组
map()循环
react
数组渲常用map()
镜像数据渲染
<script type="text/babel">
var arr = ["react", "vue", "java", "golang"];
let dom = (<div>
{
arr.map((item, index) => {
return <p>{index} -- {item}</p>
})
}
</div>)
ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>
在console
中会提示错误,如果想在react
中完成列表渲染的话,每一个子节点需要一个唯一的key
值,这个key
值是在我们新增和修改的时候让react
知道是谁在变化,让页面dom
进行更加高效的操作。
加上key
return (<p key = {index}> {index} -- {item}</p>)
for in循环
使用for in
循环
// for in 循环
function forInArray(params) {
var domArr = []
for(let index in arr){
domArr.push( <p key = {index}> { arr[index] } </p> )
}
return domArr;
}
let dom = ( <div>{
forInArray({arr})
}</div> )
对象
遍历对象的 key和value
<script type="text/babel">
let user = {
name: "laoshiren",
course: "react",
tools: "vscode"
}
function objectKeys (params) {
var keysArr = []
// 对象的键值遍历,当对象是个变量的时候,不能用object.key的方式 只能用object[key]
// Object.keys()返回一个对象的key的数组当然还有Object.values()
Object.keys(params)
.map( (keyName,i)=> {
keysArr.push( <div key = {i}>
<span>对象的keyName是 </span> { keyName }
<div></div>
<span>对象的value是 </span> {params[keyName]}
<p></p>
</div> )
} )
return keysArr
}
let dom = ( <div>{
objectKeys(user)
}</div> )
ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>