react (3 JSX语法)

2021-05-25 17:04:50 阅读：116 来源： 互联网

标签：语法 const name dom price react item JSX id

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>

在这里插入图片描述

标签：语法,const,name,dom,price,react,item,JSX,id
来源： https://blog.csdn.net/qq_15034541/article/details/117259145

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react (3 JSX语法)

React.js JSX语法