[JavaScript知识库]react的jsx学习

一 - 指定 React 元素类型

1. JSX 标签的第一部分指定了 React 元素的类型
2. 大写字母开头的 JSX 标签意味着它们是 React 组件(当你使用 JSX 表达式时，Foo 必须包含在作用域内)

1- React 必须在作用域内

3. 由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内

例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

2 - 在 JSX 类型中使用点语法

在 JSX 中，你也可以使用点语法来引用一个 React 组件。当你在一个模块中导出许多 React 组件时，这会非常方便

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" />;
}

3 - 用户定义的组件必须以大写字母开头

• 以小写字母开头的元素代表一个 HTML 内置组件
• 大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
• 如果你确实需要一个以小写字母开头的组件，则在 JSX 中使用它之前，必须将它赋值给一个大写字母开头的变量

4 - 不能将通用表达式作为 React 元素类型

如果你想通过通用表达式来（动态）决定元素类型，你需要首先将它赋值给大写字母开头的变量

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} />;
}

二 - JSX 中的 Props

1 - JavaScript 表达式作为 Props

2 - 字符串字面量

3 - Props 默认值为 “True”

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

4 - 属性展开

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

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

三 - JSX 中的子元素

1 - 字符串字面量

2 - JSX 子元素

3 - JavaScript 表达式作为子元素

4 - 函数作为子元素

// 调用子元素回调 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>
  );
}

4 - 布尔类型、Null 以及 Undefined 将会忽略

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

四 - Render Props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

1 - 任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.

<Mouse children={mouse => (
  <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
)}/>

<Mouse>
  {mouse => (
    <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
  )}
</Mouse>