React的style用法
给jsx代码中添加样式,需要将class(保留字) ==> className形式!
给jsx代码中添加内联样式,style={ {} }
<head/>
<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"))
}