React —— 深入JSX

深入JSX

实际上，jsx仅仅只是React.createElement(component,props,...children)函数的语法糖。

如下JSX代码：

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

会编译为：

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

如果没有子节点，你还可以使用自闭合的标签形式，如：

<div className="sidebar">

会编译为

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

指定React元素类型

JSX标签的第一部分指定了React元素的类型。
大写字母开头的JSX标签意味着他们是React组件。这些标签会被编译为对命名变量的直接引用，所以，当你使用JSX表达式时，Foo必须包含在作用域内。

React必须在作用域内

由于JSX会编译成React.createElement调用的形式，所以React库也必须包含在JSX的代码作用域内。
例如，在如下的代码中，虽然React和CustomButton并没有被直接使用，但还是需要导入：

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

function WarningButton(){
    return <CustomButton color = "red">
}

如果你不是用javascript打包工具而是直接通过<script>标签加载React，则必须将React挂载到全局变量中。

在JSX类型中使用点语法

在JSX中，你也可以使用点语法来引用一个React组件。当你在一个模块中到处了许多React组件时，这会非常方便。例如，如果MyComponents.DatePicker是一个组件，你可以在JSX中直接使用：

import React from 'react'
const MyComponents = {
    DatePicker:function DatePicker(props){
        retun <div>Imagine a {props.color} datapicker here.</div>
    }
}

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

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

以小写字母开头的元素代表一个HTML内置组件。比如<div>或者<span>会生成对应的字符串'div'和'span'传递给React.createElement（作为参数）。大写字母开头的元素则对应着在JavaScript引入或者自定义的组件，例如<Foo />会编译为React.createElement(Foo)。

我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在JSX中使用它之前，必须将它赋值给一个大写字母开头的变量。

在运行时选择类型

你不能通过表达式作为React元素类型。如果你想通过通用表达式来（动态）决定元素类型，你需要首先将它赋值给大写字母开头的变量。这通常用于根据Prop来渲染不同组件的情况下：

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

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

function Story(props) {
  // 错误！JSX 类型不能是一个表达式。
  return <components[props.storyType] story={props.story} />;
}

要解决这个问题, 需要首先将类型赋值给一个大写字母开头的变量：

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

有多种方式可以在JSX中指定props。

JavaScript表达式作为Props

你可以把包裹在{}中的JavaScript表达式作为一个prop传递给JSX元素。例如，如下的JSX：

<MyComponents foo={1+2+3+4}>

在MyComponents中，props.foo的值等于1+2+3+4的执行结果10。
if语句以及for循环语句不是JavaScript表达式，所以不能在JSX中直接使用，但是你可以在JSX以外的代码中:

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

字符串字面量

你可以使用字符串赋值给prop。如下两个jsx表达式是等价的：

<MyComponent message="hello word">
<MyComponent message={'hello word'}>

当你将字符串字面量赋值给prop时，它的值是未转义的。所以下面两个JSX是等价的:

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

这种行为通常是不重要的，这里只是提醒有这个用法。

Props 默认值为true

如果你没给Prop赋值，它的默认值是true。以下两个JSX表达式是等价的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

通常，我们不建议不传递 value 给 prop，因为这可能与 ES6 对象简写混淆，{foo} 是 {foo: foo} 的简写，而不是 {foo: true}。这样实现只是为了保持和 HTML 中标签属性的行为一致。

属性展开

如果 你已经有了一个props对象，你可以使用展开运算符...来在JSX中传递整个props对象。以下两个组件是等价的：

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

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

你还可以选择只保留当前组件需要接受的props，并使用展开运算符将其他props传递下去。

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

在上述例子中，kind的prop会被安全的保留，它将不会被传递给DOM中的button元素。所有其他的props会通过...other对象传递，是得找个组件的应用可以非常灵活。你可以看做它传递一个onClick和children属性。
属性展开在某些情况下很有用，但是也很容易将不必要的props传递给不想关的组件，或者将无效的HTML属性传递给DOM。建议谨慎使用该语法。

JSX中的子元素

包含在开始和结束标签之间的JSX表达式将作为特定属性props.children属性传递给外层组件。有几种不同的方法来传递子元素：

字符串字面量

你可以将字符串放在开始和结束标签之间，此时props.children就只是该字符串。这对于很多内置的HTML元素很有用。例如：

<MyComponent>Hello world!</MyComponent>

这是一个合法的JSX，<MyComponent>中的Props.children是一个简单的未转义字符串"Hello world!"。因此你可以采用编写HTML的方式来编写JSX。如下所示：

<div>This is valid HTML &amp; JSX at the same time.</div>

JSX会移除行首尾的空格以及空行。与标签相邻的空行均会被删除，文本字符串之间的新行会被压缩为了一个空格。因此以下的几种方式都是等价的：

<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

JSX 子元素

子元素允许由多个JSX元素组成。这对于嵌套组件非常有用：

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与JSX子元素一起使用。这也是JSX类似HTML的一种表现，所以如下代码是合法的JSX并且也是合法的HTML：

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

React 组件也能够返回存储在数组中的一组元素：

render() {
  // 不需要用额外的元素包裹列表元素！
  return [
    // 不要忘记设置 key :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

JavaScript 表达式作为子元素

JavaScript 表达式可以被包裹在{}中作为子元素。例如，以下表达式是等价的：

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

这对于展示任意长度的列表非常有用。例如，渲染HTML列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

JavaScript表达式也可以和其他类型的子元素组合。这种做法可以方便地替换模板字符串：

function Hello(props){
    return <div>Hello {props.addressee}</div>
}

函数作为子元素

通常，JSX中的JavaScript表达式将会计算为字符串、React元素或者是列表。不过，props.children和其他prop一样，它可以传递任意类型的数据，而不仅仅是React已知的可渲染的类型。例如，如果你有一个自定义组件，你可以把回调函数座位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>
  );
}

你可以将任何东西座位子元素传递给自定义组件，只要确保在该组件渲染之前能够被转换成React理解的对象。这种用法并不常见，但可用于扩展JSX。

布尔类型、Null和Undefined将会忽略

<div />
<div></div>
<div>{false}</div>
<div>{true}</div>
<div>{null}</div>
<div>{undefined}</div>

这有助于依据特定条件来渲染其他的React元素。例如,在以下的jsx中，仅当shadowSizeHeader为true的时候，才会渲染<Header / >组件：

<div>
    {showHeader && <Header>}
    <Content />
</div>

值得注意的是有一些“falsey”的值，如数字0，仍会被React渲染。例如以下代码不会像你预期那样工作，因为当props.messages为空数组时候，0仍然会被渲染：

<div>
    {
        props.message.length && <MessageList messages={props.messages} 
        />
    }
</div>

要解决这个问题，确保&&之前的表达式总是布尔值：

<div>
  {
        props.message.length >0 && <MessageList messages={props.messages} 
        />
    }
</div>

反之，如果你想渲染false、true、null、undefined等值，你需要先将他们转换为字符串：

<div>
My JavaScript variable is {String(balue)}
</div>