React (4 JSX语法)_react umi4 jsx-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15034541/article/details/117259145

本文介绍了React.js中JSX的基本使用，包括如何在JSX中插入表达式、条件渲染和列表渲染。示例展示了如何根据变量值动态生成DOM元素，并演示了如何处理列表数据，同时强调了key属性的独特性和类名的写法。此外，还提到了行内样式的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React.js JSX语法

表达式

const text ='我是一条内容'
const dom=(
  <div>
    <h1>{text}</h1>
  </div>
)
ReactDOM.render(
  dom,
  document.getElementById('root')
);

在这里插入图片描述

const num=10
const dom=(
  <div>
    <h1>{num+10}</h1>
  </div>
)
ReactDOM.render(
  dom,
  document.getElementById('root')
);

在这里插入图片描述
React.js 条件渲染

const istext=false
const dom=(
  <div>
    <h1>{istext?100:200}</h1>
  </div>
)

在这里插入图片描述
React.js列表渲染和样式处理

渲染列表的时候需要增加一个key属性且key属性保证时唯一的（最好不要用索引号）
类名要写className

import './index.css';
const list=[{
    id:1,
    name:'ak47',
    price:'$999'
},{
    id:2,
    name:'m416',
    price:'$9999'
},{
    id:3,
    name:'uzi',
    price:'$888'
},{
    id:4,
    name:'巴雷特',
    price:'$1000000'
}]
const dom=(
<div className='box1'>
  <div >
    <ul>
    {list.map(item=>{
       return <li key={item.id}>{item.name}</li>
     })}
    </ul>
  </div>
  <div>
   <ul>
   {list.map(item=>{
      return <li key={item.id}>{item.price}</li>
    })}
   </ul>
 </div>
</div>
)

.box1 {
  display: flex;
}
.box1 div li {
  list-style: none;
}

在这里插入图片描述

行内样式写法

 <ul>
 //background-color这样的要写驼峰
   {list.map(item=>{
      return <li style={{'color':'#fff','backgroundColor':'pink'}} key={item.id}>{item.price}</li>
    })}
   </ul>