概念

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

使用

点语法

import { Input } from 'antd';
const { Search } = Input;
<Input.Search />

函数作为子元素

回调函数作为 props.children 进行传递

// 调用子元素回调 numTimes 次，来重复生成组件
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

注意

JSX 默认转义防止注入攻击

组件不要嵌套另一个组件定义

非常慢，并且会导致 bug 产生

export default function Gallery() {
  // 🔴 永远不要在组件中定义组件
  function Profile() {
    // ...
  }
  // ...
}
export default function Gallery() {
  // ...
}

// ✅ 在顶层声明组件
function Profile() {
  // ...
}

没有括号包裹的话，任何在 return 下一行的代码都将被忽略

原理

JSX 是 React.createElement(component, props, ...children) 语法糖

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)