条件判断

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