React JSX

JSX是React.createElement(component，props，...children)函数的语法糖。

<MyButton color="red" showSize={2}>

Click me

</MyButton>

会被编译成

React.createElement(

  MyButton,

    {color:red, showSize:2},

    "Ckick me"

)

如果没有子元素，可以使用闭合标签<MyButton {...props}  />

上面的{...props}使用的JSX的属性展开特性。

function App2() {

    const props = {firstname: "Ben"，lastname: "Hector" }

    return ( <Geeting {...props} /> )

}

等效于

    return ( <Geeting firstname="Ben" lastname="Hector" />)

此外还可以通过属性展开只取需要的props属性。

const { kind，...other } = props；

可以将父组件中kind属性获取到，剩余属性都在other中。

用户自定义标签需要首字母大写，因为React会将小写字母开头的标签当成HTML标签处理，可能会导致编译错误。

我们还可以根据需求动态的选择React组件，但是标签并不支持表达式，但是支持变量，我们可以将表达式赋给一个大写字母开头的变量，然后通过变量动态选择组件。

const components = {

    photo: PhotoStory,

    video: VideoStory

}

function Story(props) {

    const SpecificStory = components[props.storyType]；

    return ( <SpecificStory /> )