react项目---基本语法字符串数组（6）

谁践踏了优雅 2022-09-03 11:25 125阅读 0赞

在我们编写html代码的过程中，字符串数组是会经常遇到的，如何来正确的处理字符串数组在项目中也凸显的十分的重要，不说这些冠冕堂皇的废话了，直接来看内容

# 字符串处理 #

首先我们来看如何把一个字符串显示到页面上，常用的有两种方式，比如字符串，“我是一只小小鸟”

（1） 直接放到标签里面

const myh1=<div><p>我是一只小小鸟</p></div>
    ReactDOM.render(myh1,document.getElementById("app"));

（2） 创建一个字符串变量，将变量放到标签中

const str="我是一只小小鸟";
    const myh1=<div><p>{str}</p></div>
    ReactDOM.render(myh1,document.getElementById("app"));

#   字符串数组 #

接下来我们要做的是将字符串数组显示到页面上

（1） 直接将字符串数组写到标签中

const myh1=<div><p>['小明','小红','小兰','小美','小冯']</p></div>
    ReactDOM.render(myh1,document.getElementById("app"));

![20210807093851652.png][]

但是这个显示的情况并不是我们想要的，所以我们可以像字符串一样定义一个变量然后将这个变量放到标签里面

const nameArr=['小明','小红','小兰','小美','小冯']
    const myh1=<div><p>{nameArr}</p></div>
    ReactDOM.render(myh1,document.getElementById("app"));

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

上面是我们想要的这种结果

但是有的时候我们需要对数组进行处理，比将数据的元素放到html标签中，比如放到H1标签中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

在上面的数组遍历中，我们将每一个元素都加上一个标签，然后再存到到其他的数组中，用到的遍历的方法是forEach，当然还有一种方式是map

const nameArr=['小明','小红','小兰','小美','小冯']
    const result=nameArr.map((item,index)=>{
        return <h1 key={index}>{item}~~~~</h1>
    })

map和forEach的区别在于map的循环中有一个return，所以可以将map这个循环直接放到html标签中

const myh1=<div>{nameArr.map((item,index)=>{
        return <h1 key={index}>{item}</h1>
    })}</div>
    ReactDOM.render(myh1,document.getElementById("app"));

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

#  三目运算符 #

const myh1=<div>{ 1>2 ? "1真的大于2":"1不大于2"}</div>
    ReactDOM.render(myh1,document.getElementById("app"));

# 基本的算术运算 #

const myh1=<div>{2+3}</div>
    ReactDOM.render(myh1,document.getElementById("app"));

上面便是对React中一些基本的语法，包括字符串的处理和运算

希望对你有所帮助

[20210807093851652.png]: /images/20220829/854e699e17c6416692427ef26b84a4ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/79fa4bc246074931a790bcb48faee5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/e7c858dd3af74034aebd3cccf367c1e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/8e69a413b4a748de9d50f21db3d58e28.png