REACT 高阶 深入TSX

1.在TSX可以使用点语法来解析props对象。

如果 MyComponents.DatePicker 是一个组件，你可以在 JSX 中直接MyComponents.DatePicker.

import React from 'react';

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

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

2. 用户自定义组件必须以大写字母开头，

比如uniapp中引入组件list .在TSX中应该写 html标签可以不用。<div></div>

3. 运行时选择类型，如果是动态类型，不能直接写在JSX中。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正确！JSX 类型可以是大写字母开头的变量。  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}

4. 属性展开

如果已经有了props对象，可以使用展开运算符...在JSX中传递整个props对象。

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;}

5.函数作为子元素

回调函数作为 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>
  );
}

6.布尔类型，null,undefined会被忽略