react：在jsx中使用js表达式、列表渲染、条件渲染、样式处理以及jsx注意事项

一、在JSX中使用js表达式

// 识别常规变量
// 原生js方法调用
// 三元运算符：当show为true时显示name，false时显示getSex()

const name = '姓名'
const getSex = () => {
  return '性别'
}
const show = true

function App() {
  return (
    <div className="App">
      {name}
      {getSex()}
      {show ? name : getSex()}
    </div>
  );
}

export default App;

二、JSX列表渲染

// 列表渲染: 运用ES6中的map
// map遍历列表的同时需要一个不可重复的key提高diff性能。key仅仅在内部使用，不会出现在真实dom结构中
const list = [
  {id: 1, text: '春眠不觉晓'},
  {id: 2, text: '处处闻啼鸟'},
  {id: 3, text: '夜来风雨声'},
  {id: 4, text: '花落知多少'}
]

function App() {
  return (
    <div className="App">
      <ul>
        {list.map((item) =>{
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    </div>
  )
}

export  default App

注意事项：

1. 若列表中有像 id 这种的唯一值，就用 id 来作为 key 值
2. 若列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

三、JSX条件渲染

// 条件渲染：1.三元表达式 2.逻辑&&运算

// 1.三元表达式：满足条件才会渲染一个div标签(条件太复杂的话建议用()括住)
const show = true
// 2.逻辑&&运算 

// 复杂条件渲染：复杂的多分支逻辑，我们将其放在一个函数中，通过专门的一个函数写分支逻辑，模板中只负责调用
const getBranch = (state) => {
  if(state === 1){
    return <h1>标题一</h1>
  }else if(state === 2){
    return <h2>标题二</h2>
  }else if(state === 3){
    return <h3>标题三</h3>
  }else if(state === 4){
    return <h4>标题四</h4>
  }
}

function App() {
  return (
    <div className="App">
      {show ? <div>这是一个标签</div> : null}
      {/* 前面这个为true时后面的才会显示否则不显示 */}
      {true && <span>这是一个span标签(&&运算)</span>}
      {getBranch(1)}
      {getBranch(3)}
    </div>
  );
}

export default App;

四、JSX样式处理

import './app.css' //导入外联样式
// 1.行内样式：在元素上绑定style属性就可以,(-)连接的样式名用驼峰法书写font-size=>fontSize
// 行内样式优化(建议使用)：

const style = {
  fontSize: '26px',
  border: '2px solid #111',
  borderRadius: '5px'
}
// 2.类名样式-在元素上绑定一个className属性
// 3.动态控制类名-满足条件才显示

const show = true

function App() {
  return (
    <div className="App">
      <div style={{fontSize: '26px',border: '2px solid #111'}}>行内样式</div>
      <span style={style}>行内样式优化</span>
      <div className="like">外联类名样式</div>
      <div className={show ? 'like' : ''}>动态控制类名</div>
    </div>
  );
}

export default App;

要导入的app.css

.like{
  color: cadetblue;
}

五、JSX注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代(react的独特标签）
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现