JSX注意事项

注意className

1
2


// 要写成
<div className="red">n</div>

插入变量

标签里面的所有JS代码要用{}抱起来
如果有需要的变量n，难么就用{}把n包起来
如果你需要对象，那么就要用{}把对象包起来，如{{name:‘gaocarri’}}

习惯return后面加()

JSX条件判断

直接返回

1
2
3
4


const App = () => {
  let n = 1
  return  {n % 2 === 0 ? <div>n是偶数</div> : <div>n是奇数</div>}
}

在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
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>
    })
  )
}