JSX语法

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

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

 JSX中使用js表达式

语法：{ JS 表达式 }

function App() {
  const num = 123
  return (
    <div className="App">
      {num}
    </div>
  );
}

JSX列表渲染

实现：使用数组的 map 方法

function App() {
  let arr = [
    {
      id: 1,
      name: "111",
    },
    {
      id: 2,
      name: "222",
    },
    {
      id: 3,
      name: "333",
    },
  ];
  return (
    <div className="App">
      <ul>
        {arr.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}

export default App;

JSX条件渲染

实现：可以使用 三元运算符 或   逻辑与(&&)运算符

function App() {
  const flag = true;
  return (
    <div className="App">
      {flag ? "1" : "2"}
      <br />
      {flag ? <span>111</span> : <span>222</span>}
    </div>
  );
}

export default App;

JSX样式处理

• 行内样式 - style

function App() {
  return (
    <div className="App">
      <span style={{ color: "red" }}>显示内容</span>
    </div>
  );
}

export default App;

// 或者

function App() {
  const colorObj = {
    color: "red",
  };
  return (
    <div className="App">
      <span style={colorObj}>显示内容</span>
    </div>
  );
}

export default App;

• 类名 - className（推荐）

// App.js
import "./App.css";
function App() {
  return (
    <div className="content">
      <span>显示内容</span>
    </div>
  );
}

export default App;

// App.css
.content {
  color: red;
}

• 类名 - className - 动态类名控制

// App.js
import "./App.css";
function App() {
  const flag = false;
  return (
    <div className={flag ? "name1" : "name2"}>
      <span>显示内容</span>
    </div>
  );
}

export default App;

// App.css
.name1 {
  color: red;
}
.name2 {
  color: green;
}

 JSX嵌入变量作为子元素

当变量是 Number、String、Array类型 时，可以直接显示。

当变量是 null、undefined、Boolean类型 时，内容为空，如果希望可以显示null、undefined、Boolean，那么需要转成字符串。

Object对象类型 不能作为子元素( not valid as a React child)

JSX注意事项 

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className || for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹。