JSX注意事项

  1. 注意className
1
2
// 要写成
<div className="red">n</div>
  1. 插入变量
  • 标签里面的所有JS代码要用{}抱起来
  • 如果有需要的变量n,难么就用{}把n包起来
  • 如果你需要对象,那么就要用{}把对象包起来,如{{name:‘gaocarri’}}
  1. 习惯return后面加()

JSX条件判断

  1. 直接返回
1
2
3
4
const App = () => {
  let n = 1
  return  {n % 2 === 0 ? <div>n是偶数</div> : <div>n是奇数</div>}
}
  1. 在div里
1
2
3
4
5
6
7
8
const App = () => {
  let n = 1
  return (
    <div>
      {n % 2 === 0 ? <div>n是偶数</div> : <div>n是奇数</div>}
    </div>
  )
}
  1. 变量写法
1
2
3
4
5
6
7
8
9
const App = () => {
  let n = 1
  const content=(
   <div>
      {n % 2 === 0 ? <div>n是偶数</div> : <div>n是奇数</div>}
    </div>
  )
  return content
}

循环遍历

1
2
3
4
5
6
7
8
9
const App = (props)=>{
return (
	<div>
	{props.numbers.map(n,index)=>{
	return <div>下标{index}值为{n}</div>
	}}
	</div>
)
}

还可以用for循环

1
2
3
4
5
6
7
const App =(props)=>{
const arr = []
for(let i = 0;i<props.numbers.length;i++){
arr.push(<div>下标{i}的值为{props.numbers[i]}</div>)
}
return <div>{arr}</div>
}

例子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const App = () => {
  let n = 1
  return (
    <div>
      <Component numbers={[1, 2, 3]} />
    </div>
  )
}


const Component = (props) => {
  return (
    props.numbers.map((n, i) => {
      return <div>numbers的第{i}个下标值是{n}</div>
    })
  )
}