【原创】JSX 基础

什么是 JSX

JSX 是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构。
作用：在 React 中创建 HTML 结构（页面 UI）。

JSX 不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置 babel/plugin-transform-react-jsx 包，用来解析该语法。

JSX 中使用 JS 表达式

语法：{JS 表达式}

表达式可以写在大括号中，但语句（if/swish/case/变量声明等）不可以

列表渲染 map

// 列表渲染，map
const songs = [
  {id:1, name:'zs'},
  {id:2, name:'ls'},
  {id:3, name:'ww'},
];
function App() {
  return (
    <div className="App">
        <ul>
          {songs.map(song => <li key={song.id}>{ song.name }</li>)}
        </ul>
    </div>
  );
}

为提升性能，遍历列表时需要一个 number/string 类型的不可重复的 key

模板精简原则

const getTag = (flag) => {
  if (flag == 1) {
    return <h1> this is h1 tag.</h1>
  }

  return <h3> this is h3 tag.</h3>
}

function App() {
  return (
    <div className="App">
        { getTag (2) }
    </div>
  );
}

JSX 样式处理

import './app.css';
const style = {
  color:'red',
  fontSize:'26px'
}

const activeFlag = true;

// jsx 样式控制
// 行内样式和类名样式

function App() {
  return (
    <div className="App">
        <span style={ style }>this is a span</span>
        <span className={activeFlag ? 'active' : ''}>this is another span</span>
    </div>
  );
}

export default App;

常用为类名样式。

JSX 注意事项

• JSX 必须只有一个根节点，如果没有根节点，可以用<></> （幽灵节点）代替，幽灵节点不是真实节点，不会显示在 DOM 元素中。

  function App() {
  return (
  <>
    <div className="App">
        {/* { getTag (2) } */}
        <span style={ style }>this is a span</span>
        <span className={activeFlag ? 'active' : ''}>this is another span</span>
    </div>
    <div>111</div>
  </>
  );

• 所有标签必须都闭合，成对闭合或自闭合均可。

• JSX 语法更贴近 JS 语法，属性名采用驼峰命名法 class -> className for -> htmlFor

• JSX 支持多行（换行），如果需要换行，需使用（）包裹，防止出现 bug。