条件判断

在Vue 里：

条件判断是通过 v-if v-else 指令控制的

<template>
    <div>
        <div v-if="n%2===0">n 是偶数</div>
        <span v-else>n是奇数 </span>
    </div>
</template>

在React 里：

JSX的条件判断

写法一

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

如果外边需要一个 div ，把这段JS代码包在 {} 里边

const Component = () => {
    return (
        <div>
            { return n%2===0 ? <div>n 是偶数</div> : <span>n是奇数 </span> }//注意中间要加花括号
        </div>
    )
}

写法二：把 `return` 的element起一个名字

const Component = () => {
    const content = (
        <div>
            { return n%2===0 ? <div>n 是偶数</div> : <span>n是奇数 </span>}
        </div>
    )
    return content
}

写法三：把里边的东西起一个名字

const Component = () => {
    const inner = n%2===0 ? <div>n 是偶数</div> : <span>n是奇数 </span>
    const content = (
        <div>
            { inner }
        </div>
    )
return content
}

写法四：使用if...else...

const Component = () => {
    let inner
    if (n%2===0) {
        inner = <div>n 是偶数</div>
    } else {
        inner = <span>n是奇数</span>
    }
    const content = (
        <div>
            { inner }
        </div>
    )
    return content
}

结论

在Vue里，只能用Vue提供的语法进行条件判断

在React里，想怎么写就怎么写，就是在写JS，在JS里用JSX

循环

在Vue里：

通过 v-for 指令遍历数组，对象

<template>
    <div>
        <div v-for="(n, index) in numbers" :key="index">
            下标{{index}} ，值为{{n}}
        </div>
    </div>
</template>

在React里：

const Component = (props) => {
    return props.numbers.map((n,index)=>{
        return <div> 下标{index} 值为{n}</div>
    })
}

组件接收一个参数props，是一个对象。使用 array.map 映射，把原数组的每一项变成另一种形式如果需要外边的div：

const Component = (props) => {
    return (
        <div>
            { props.numbers.map((n,index)=>{
                return <div> 下标{index} 值为{n}</div>
            })
            }
        </div>
    )
}

还可以这样写(用的少，map用的多)

const Component = (props) => {
    const array = []
    for(let i=0;i<props.numbers.length;i++){
        array.push(<div> 下标{i} 值为{props.numbers[i]} </div>)
    }
    return (
        <div>
            { array }
        </div>
    )
}

React 的条件判断和循环