react学习3-JSX条件渲染和列表渲染

JSX条件渲染

• js形式条件渲染

function showForm (flag) {
  // 根据参数flag的状态显示不同内容
  if(flag) {
    // 显示登陆框
    return <div>登陆框</div>
  } else {
    // 显示注册框
    return <div>注册框</div>
  }
}

• 元素变量

function showForm (flag) {
  // 根据参数flag的状态显示不同内容
  let form = null;
  if(flag) {
    form = <div>登陆</div>
  } else {
    form = <div>注册</div>
  }
  return form
}

• 行内条件渲染

function showForm (flag) {
  // return <div>{flag? '登陆': '注册'}</div>
  // return <div>{flag ? <div>登陆</div>: <div>注册</div>}</div>
  return <div>{flag && <div>条件成立就显示</div>}</div>
}

• 阻止渲染

function showForm (flag) {
  if (flag) {
    return null;
  }
  return <div>阻止渲染</div>
}

JSX列表渲染

• 渲染多个元素
  • 数组中可以放置JSX元素
• key只在数组上下文中有含义
  • 为了提高渲染性能
  • key在兄弟节点之间必须唯一

let arr = ['apple', 'orange', 'lemon', 'banana']
// let list = arr.map((item, index) => {
//   return <li key={index}>{item}</li>
// })
let list = []
arr.forEach((item, index) => {
  list.push(<li key={index}>{item}</li>)
})
let element = <ul>{list}</ul>

• JSX中可以嵌入map结构

// 不建议按照如下方式写，可读性比较低
let element = <ul>{arr.map((item, index) => <li key={index}>{item}</li>)}</ul>

JSX案例

• Tab效果：基于JSX实现
• 模板的效果由数据驱动：数据的变化导致页面的变化(数据的响应式)

代码示例：

const tabData = [{
  id: 1,
  title: 'apple',
  content: '苹果'
}, {
  id: 2,
  title: 'orange',
  content: '橘子'
}, {
  id: 3,
  title: 'lemon',
  content: '柠檬'
}]

// 当前选中的条目的索引
let currentIndex = 1

function showTab (data) {
  const titles = []
  const contents = []
  data.forEach((item, index) => {
    // 动态生成标题元素
    titles.push(<li className={currentIndex === index?'active': ''} key={item.id}>{item.title}</li>)
    // 动态生成内容元素
    contents.push(<div className={currentIndex === index?'active': ''}  key={item.id}>{item.content}</div>)
  })
  return (
    <div className="tab">
      <ul>
        {titles}
      </ul>
      {contents}
    </div>
  )
}

const element = showTab(tabData)

ReactDOM.render(element, document.getElementById('app'))