模板
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="reactDom"></div>
<script type="text/babel">
</script>
</body>
</html>
注意先寫這個 <script type="text/babel">，不然根本秀不起來了
使用表達式
let text = "你好"
let name = "小明";
let MyDom = <p>{name}</p>
函數調用
function fun(obj) {
// return "姓名是" + obj.name+"------------年齡是"+obj.age
return `姓名是${obj.name} --- 年齡是${obj.age}`
}
let user = {
name:"小明",
age:18
}
let myDom = (
<div>
<div>{text}</div>
<div>{num}</div>
<div>{num + 1}</div>
{/*函數調用*/}
<div>{fun(user)}</div>
</div>
)
屬性綁定
let text = "點我去百度"
let linkUrl = "http://www.baidu.com"
let myDom = <a href={linkUrl}>{text}</a>
類名綁定
let myDom = <p className="myClass">修改我的樣式</p>
數組遍歷
常用map() 來遍歷數組
let arr = ["吃飯", "睡覺", "打豆豆"];
let myDom = arr.map((item,index)=>{
// key 必須是獨一無二的
return (<p key={index}>{item}</p>)
})
用 for in 方法
let arr = ["吃飯", "睡覺", "打豆豆"];
function fun() {
let newarr = [];
for (let index in arr) {
newarr.push(<p key={index}>{arr[index]}</p>)
}
return newarr;
}
事件綁定
注意點:
- 我們需要把
ReactDOM.render(fun(), document.getElementById("reactDom"))封裝成一個 render() 方法，在調用時渲染 - 事件名，直接駝峯命名法搞定
let arr = ["吃飯", "睡覺", "打豆豆"];
let index = 0;
function fun() {
let myDom = arr.map((v, i) => {
return <p style={{ color: i === index ? 'red' : '' }} key={i} onClick={() => { index = i; console.log(i + "----" + index); render() }}>{v}</p>
})
return myDom
}
function render() {
ReactDOM.render(fun(), document.getElementById("reactDom"))
}
render()
遍歷對象
通過 Object.keys(obj) 獲取數組
let obj = {
name: "xixi",
age: 19,
sex: "男"
}
let myDom = (
<div>
{Object.keys(obj).map((v, i) => {
return <p>遍歷的屬性是{v}------遍歷出來的值是:{obj[v]}</p>
})}
</div>
)
ReactDOM.render(myDom, document.getElementById("reactDom"))