在我们编写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"));

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

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

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

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

const nameArr=['小明','小红','小兰','小美','小冯']
const strArr=[];
nameArr.forEach((item,index)=>{const str=<h2 key={index}>{item}</h2>;strArr.push(str);
})const myh1=<div><p>{strArr}</p></div>
ReactDOM.render(myh1,document.getElementById("app"));

在上面的数组遍历中，我们将每一个元素都加上一个标签，然后再存到到其他的数组中，用到的遍历的方法是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"));

三目运算符

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中一些基本的语法，包括字符串的处理和运算

希望对你有所帮助

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

React项目 --ES6 语法中的class （9）
上一篇的博客中我们介绍了,如何设置React项目的根目录连接地址:https://blog.csdn.net/datouniao1/article/details/119505562 要学习Reac ...
React 项目 -ES6 语法类的继承（10）
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
JS对象字符串分割 split() 方法将字符串分割为字符串数组，并返回此数组。语法： stringObject.split(separator,limit)...
字符串分割split() 知识讲解: split() 方法将字符串分割为字符串数组,并返回此数组. 语法: stringObject.split(separator,limit) 参数说明: 注意:如 ...
集成Emscripten+wasm至React项目踩坑记录
前言需求是有一个C++写的工具包(负责大规模的数据运算). 需要用emscripten是把C/C++编译成WebAssembly,便于在JS环境之后执行. 最终在React项目中调用工具包. 数据类 ...
React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...
React 项目--创建组件（7）
创建组件在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式,如需回顾: https://blog.csdn.net/datouniao1/article/details/1 ...
React 项目--引入bebal 解析JSX（5）
通过webpack创建react,我们可以观看前面的博文: https://blog.csdn.net/datouniao1/article/details/119460618 我们知道是React项 ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...

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

字符串处理

字符串数组

三目运算符

基本的算术运算

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

最新文章

热门文章