1.JS表达式

在JSX中，可以使用大括号{}来嵌入JavaScript表达式，包括变量、函数调用、方法调用等。

• 使用引号传递字符串。
• 使用JavaScript变量。
• 函数调用和方法调用。
• 使用JavaScript对象。

需要注意的是，某些JavaScript语句，如if、switch、变量声明等，不属于表达式，不能直接在JSX中使用。

const message = 'this is message';
function getAge() { return 18; }

function App() {
  return (
    <div>
      <h1>this is title</h1>
      {'this is str'}
      {message}
      {getAge()}
    </div>
  );
}

2.列表渲染

在JSX中，可以使用JavaScript的map方法来实现列表的渲染。

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
];

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

3.条件渲染

在React中，可以使用逻辑与运算符&&或三元表达式?:来实现条件渲染。

const flag = true;
const loading = false;

function App() {
  return (
    <>
      {flag && <span>this is span</span>}
      {loading ? <span>loading...</span> : <span>this is span</span>}
    </>
  );
}

4.复杂条件渲染

对于更复杂的条件渲染，可以结合自定义函数和判断语句来实现。

const type = 1; // 0, 1, or 3

function getArticleJSX() {
  if (type === 0) {
    return <div>无图模式模版</div>;
  } else if (type === 1) {
    return <div>单图模式模版</div>;
  } else if (type === 3) {
    return <div>三图模式模版</div>;
  }
}

function App() {
  return (
    <>
      {getArticleJSX()}
    </>
  );
}