用React实现部分Vue常用指令

1.实现vue的v-for

在Vue开发中，经常使用v-for来遍历数组，然后进行渲染数据，另外也要注意还要给每一项绑定一个key，否则在删除、新增元素的时候会导致顺序错乱问题。

在React中是用数组的Map()方法来实现的。

<></> 相当于Vue的<template></template>元素。

import React, {useState} from 'react';

const Dome = () => {
    const [list, setList] = useState(['语文', '数学', '英语', '政治'])

    return(
        <>
          {
              list.map((item, inx) => {
                return(
                    <div key={inx}>{item}</div>
                )
              })
          }
        </>
    )
};

export default Dome

 2.实现vue的v-if

（1）在React中可以借助"三元运算符"来实现v-if

import React, {useState} from 'react';

const Dome = () => {
    const [show] = useState(false)

    return(
        <>
          {
            show ? <div>显示</div> : <div>隐藏</div>
          }
        </>
    )
};

export default Dome

（2）第二种方式（不够简洁，不推荐）

import React, {useState} from 'react';

const Dome = () => {
    const [show] = useState(false)
    const element = () => {
        if(show) {
            return(
                <div>显示</div>
            )
        }else {
            return (
                <div>隐藏</div>
            )
        }
    }

    return(
        <>
          { element() }
        </>
    )
};

export default Dome

 3.实现vue的v-show

import React, {useState} from 'react';

const Dome = () => {
    const [show] = useState(false)

    return(
        <>
          <div style={{ display: !show ? 'bock' : 'none' }}>龙马精神</div>
        </>
    )
};

export default Dome

注： style 接受的值是一个对象，且用 {} 括号传入，而且对象的属性名只能用驼峰式来命名。

4.实现vue的v-model 

import React, {useState} from 'react';

const Dome = () => {
    const [value, setValue] = useState('')
    const handleChange = e => {
        setValue(e.target.value)
    }
    return(
        <>
          <input type="text" value={value} onChange={handleChange}/>
        </>
    )
};

export default Dome

v-model其实就是数据双向绑定，在vue项目中input输入框经常使用到v-model 。

React是利用input的value和onChange事件来实现。其实Vue组件的v-model是个语法糖，本质上是利用名为value的prop和名为input的事件来实现数据双向绑定的。

看一个例子：

父组件：

import React, { useState } from 'react';
import Child from './child';

export default function Index(){
  const [value, setValue] = useState('密码')
  const handleChange = ev => {
      setValue(ev)
  }

  return(
      <>
       <button onClick={() => {
           handleChange('123')
       }}>按钮一</button>
        <Child value={value} onChange={ handleChange } />
      </>
  )
}

子组件：

import { useState } from "react";

export default function Child({value, onChange}) {
  
  return (
    <div>
      <div>{value}</div>
      <button onClick={() => {
          onChange('新密码')
      }}>按钮二</button>
    </div>
  );
}