jsx语法二

最新推荐文章于 2025-11-12 08:29:31 发布

原创最新推荐文章于 2025-11-12 08:29:31 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #es6 #javascript

react 专栏收录该内容

5 篇文章

订阅专栏

/**
 * jsx 数据循环
 * 01.直接将数组解构输出
 * 02.循环遍历输出
 *
 */
// const arr=[<p>1</p>,<p>2</p>,<p>3</p>]
const arr=[
  {
    id:1,
    name:'jsx',
    age:100
  },
  {
    id:2,
    name:'jsx2',
    age:200
  }
]

function App() {
  const ret=arr.map(item=>{
    return(
      <li key={item.id}>/*这里添加key可以优化渲染*/
        <span>{JSON.stringify(item)}</span>
      </li>
    )
  })
  return <ul>{ret}</ul>

}

export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {StyleRoot} from 'radium';

ReactDOM.render(
  <StyleRoot><App/></StyleRoot>,
  document.getElementById('root')
);

import Radium from "radium"
/**
 * jsx 样式处理
 * 01.内联样式
 *    a.设置行内样式时需要将样式键值对放入 {}
 *    b.内联样式默认不支持伪类与媒体查询样式设置,需引入第三方包radium可以使内联样式支持
 *    c.将需要支持伪类的组件用Radium包裹
 *    d.在indexjs中将需要支持媒体查询的组件标签用<StyleRoot></StyleRoot>包裹
 *    e.通过样式数组控制样式
 * 02.外联样式
 */

// const styleObj={
//   width:100,
//   height:200,
//   backgroundColor:'green',
//   ':hover':{backgroundColor:'skyblue'},
//   '@media(max-width:1000px)':{width:300}
// }

const ButtonStyle={
  base:{
    width:150,
    height:40,
    fontSize:20,
    background:'red'
  },
  login:{
    background:'green'
  },
  logOut:{
    background:'orange'
  }
}

const isLogin=false

function App() {
  return (
    <div>
      <button style={[
        ButtonStyle.base,
        isLogin ? ButtonStyle.login : ButtonStyle.logOut
      ]}>按钮</button>
    </div>
  )

  // return <div  style={styleObj}>行内样式</div>
  // return <div style={{width:'200px}}>行内样式</div>
}

export default Radium(App);