JSX深入使用

概念

本质上讲，JSX 是 React.createElement(component, props, ...children) 方法提供的语法糖

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

组件引用

function MyComp (props) {
  return (
    <div>
      <CompA />   {/*当没有子代时，可以直接使用闭合标签*/}
      <CompB />   {/*组件开头，必须以大写，如小写则是被认为内置组件*/}
      <My.CompB />   {/*可以使用点表示法引用 React 组件，方便地从一个模块中导出多个 React 组件*/}
      <CompC[key] />   {/*组件引用不能使用表达式，这样无法正常工作，可使用变量替代*/}
    </div>
  )
}

表达式使用

function MyComp (props) {
  return (
    <div>
      <CompA foo={1+2+3+4} />               // 在组件中使用 {} 包裹的表达式
      <CompA bar={2 > 1 ? '2' : '1'} />     // 可以使用判断语法糖，但不能使用 if else
      <CompA {...props} />                  // 可以使用对象展开符传递对象
      <CompA>{list.map((item) => {return <li>item.text</li>})}</CompA>      // 使用 Array.map() 函数循环输出
      // props.children 可以像其他属性一样传递任何数据，而不仅仅是 React 元素，例如下面传递了一个函数
      <CompA>{(index) => <div key={index}>This is {index} in the list</div>}</CompA>
    </div>
  )
}