React学习之进阶JSX语法（十一）

1.再顾JSX语法

从我第一篇博客来看，JSX其实就是提供了一个实现React.createElement(component, props, ...children)函数的便捷方法

<MyButton color="blue" shadowSize={
  2}>
  Click Me
</MyButton>

React编译完后就形成了

React.createElement(
  MyButton,
  {
  color: 'blue', shadowSize: 2},
  'Click Me'
)

所以注意，第一个参数不一定是一个DOM参数，只要是一个JSX组件或者是DOM标签。

当然如果你不加入子内容的话

<div className="sidebar" />

直接闭合标签即可

编译后

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

2.不要试图用属性访问符来构造JSX组件

const MyComponents = {
  DatePicker: function DatePicker(props) {
   
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
   
//Warning : no allowed
  return <MyComponents.DatePicker color="blue" />;
}

这种使用.属性访问符进行构建JSX组件虽然不会报错，但是不允许

3.用户自定义的组件名必须是大写的

function hello(props) {
   
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
   
  return <hello toWhat="World" />;
}

此方法是不会有任何输出的

至于为什么之前的博客也讲过，DOM元素才能用小写，其他的都应该用大写。

如果你已经将一个组件的名字写成了小写，可以将它赋值给一个大写的变量即可

function HelloWorld