【Reacte】 React 嵌入JS表达式、条件渲染、数组列表渲染、样式处理

最新推荐文章于 2023-08-05 20:38:10 发布

春暖花开.,

最新推荐文章于 2023-08-05 20:38:10 发布

阅读量343

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/m0_64494670/article/details/129293206

版权

嵌入JS表达式

语法: { js表达式 }

let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素 {content}</h1>

描述:

1. 只要是合法的js表达式都可以进行嵌入

2.JSX自身就是JS表达式

注意: 语法是单花括号，不是Vue内双花括号

条件渲染

语法:

// 条件渲染
let islodata = false

一. if 渲染方式
 const numtion = () => {
// 一. if
   if (islodata) {
    return <div>我是执行成功后的数据</div>
   }

   return <div>我是执行失败后的数据</div>
 }

//二. 三元 渲染方式
const numtion = () => {
  return islodata ? (
    <div>我是执行成功后的数据</div>
  ) : (
    <div>我是执行失败后的数据</div>
  )
}

const title = <h1>{numtion()}</h1>

描述: 两种方式 if/else 和三元运算符来实现

条件渲染说明:

(9条消息) Vue02/ Vue入门、Vue指令、修饰符、事件参数、v-model表单元素_春暖花开.,的博客-CSDN博客https://blog.csdn.net/m0_64494670/article/details/127526365?spm=1001.2014.3001.5502

数组列表渲染

语法:

const obj = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '赵六', age: 26 },
  { id: 3, name: '刘东', age: 15 }
]

const vray = obj.map(item => {
  return (
    <p key={item.id}>
      我的名字是:{item.name}， 我是年龄是{item.age}
    </p>
  )
})

const title = <h1>{vray}</h1>

描述:

注意:

1.渲染列表时需要添加 key 属性， key属性的值要保证唯一的

2. 尽量避免使用索引号作为 key

key值详细说明: (9条消息) Vue03/Vue指令、v-for的key说明、Vue 就地复用策略_vue就地复用_春暖花开.,的博客-CSDN博客https://blog.csdn.net/m0_64494670/article/details/127567184?spm=1001.2014.3001.5502

样式处理

（1）行内样式 - style

语法：

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>
{item.name}
</li>

在style内通过对象的方式传递数据

（2）类名 - className

// css文件
.container {
    text-align: center
}

//js文件
import './css/index.css'

<li className='container' key={item.id} style={
{'color': 'red',"backgroundColor": 'pink'}}>
{item.name}
</li>