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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

字符串处理

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

（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"));

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

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

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

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

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

但是有的时候我们需要对数组进行处理，比将数据的元素放到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"));

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

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

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

三目运算符

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

希望对你有所帮助