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>