React的style用法
给jsx代码中添加样式,需要将class(保留字) ==> className形式!
给jsx代码中添加内联样式,style={ {} }
<style>
.red{
color:red
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let style = {background:"green",transform:"rotate(30edeg)"}
const a =
<div>
<p className="red" style={style}>Gordon-Liu</p>
</div>
ReactDOM.render(a,document.querySelector("#app"))
</script>
封装数组的遍历
封装该函数的时候需要将其通过内部的return返回遍历后的新数组,否则浏览器默认返回undefined,不会被浏览器渲染
<div id="app"></div>
<script type="text/babel">
let arr = [10, 20, 30]
let arr2 = ["a","b","c"]
function showList(arr){
return arr.map((item,index)=>{
return <p key={index}>{item}</p>
})
}
const a =
<div>
{showList(arr)}
{showList(arr2)}
</div>
// <div>
// {
// arr.map((item,index)=>{
// return <p key={index}>{item}</p>
// })
// }
// {
// arr2.map((item,index)=>{
// return <p key={index}>{item}</p>
// })
// }
// </div>
ReactDOM.render(a,document.querySelector("#app"))
</script>
数据改变后再次调用渲染真实dom
return后面返回一段jsx代码的时候,建议后面需要添加()
因为return解析当前行的代码,若后面没代码,那就为空
React只是一个view视图层框架,又不是完整的mvvm框架。当数据改变,视图肯定不会更新。
那么就需要给渲染真实dom的时候封装一个函数,在更改数据后再调用一次,使页面数据进行更新
<style>
.red{
color:red
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let arr = [10, 20, 30, 40, 50]
let arrIndex = 0
function show(arr){
return arr.map((item,index)=>{
return <p
key={index}
className={ arrIndex === index ? "red" : ""}
onClick={ ()=>{arrIndex = index; render()} }
>{item}</p>
})
}
render()
function render(){
const a =
<div>
{
show(arr)
}
</div>
ReactDOM.render(a,document.querySelector("#app"))
}
</script>
函数式组件与类组件
React中定义组件的两种形式:
函数式组件(无状态组件)
const 组件名(首字母大写)=(props)=>{
return jsx表达式
}
类组件
class 组件名 extends React.Component {
render(){ //render是必不可少的钩子函数
return jsx表达式
}
}
函数式组件接受形参
函数式组件内部不能访问this,通过参数props可以接受外部传入的属性。
如果外部传入的属性需要是number类型,age={number值}
<div id="app"></div>
<script type="text/babel">
const App = props =>{
return (
<div>
{/*我叫Gordon-Liu === {props.sex} === {props.name} === {props.age}*/}
{/*我叫Gordon-Liu === {props.a.sex} === {props.b.name} === {props.b.age}*/}
我叫Gordon-Liu === {props.sex} === {props.name} {/*后面声明的变量将前面的覆盖了*/}
</div>
)
}
let a ={
sex:"男",
name:"lisi"
}
let b = {
name :"zhangsan ",
age:10
}
// ReactDOM.render(<App sex={"男"} name={"lisi"} age={10} />,document.querySelector("#app"))
// ReactDOM.render(<App a={a} b={b} />,document.querySelector("#app"))
ReactDOM.render(<App {...a} {...b} />,document.querySelector("#app")) //展开后的样子就是第一种
</script>
类组件接受形参
在类组件中,通过this就可以获取到组件的实例本身,其中this.props.xxx就可以获取到外部传入的属性值了。
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
render(){
return (
<div>
my name is === {this.props.a.name} === {this.props.sex} === {this.props.age}
</div>
)
}
}
let a = {
name:"Gordon-Liu"
}
let b = {
age:20
}
ReactDOM.render(<App sex={"man"} a={a} {...b} />,document.querySelector("#app"))
</script>
对象的处理
找出对象的键:Object.keys(json).map(xxxx)
<div id="app"></div>
<script type="text/babel">
let obj = {a:1,b:2,c:3,d:4}
class App extends React.Component{
render(){
return (
<div>
{
Object.keys(obj).map((item)=>{
return <p key={item}>{item}:{obj[item]}</p>
})
}
</div>
)
}
}
ReactDOM.render(<App/>,document.querySelector("#app"))
</script>
简单案例练习:
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.js"></script>
<script src="./data.js"></script>
<style>
.red{
color:red
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
render(){
return (
<div>
{
Object.keys(dataList).map((item)=>{
return (
<ul key={item}>
<h2>{dataList[item].name}</h2>
{
dataList[item].list.map((item,index)=>{
return <li key={index}>{item.username} : <span className={item.vip?"red":""}>{item.message}</span></li>
})
}
</ul>
)
})
}
</div>
)
}
}
ReactDOM.render(<App/>,document.querySelector("#app"))
</script>
</body>
</html>