import React from 'react';

 

// Wrong! This is a component and should have been capitalized:

function hello(props) {

  // Correct! This use of 
 is legitimate because div is a valid HTML tag:

  return 
Hello {props.toWhat}
;

}

 

function HelloWorld() {

  // Wrong! React thinks  is an HTML tag because it's not capitalized:

  return ;

 

  // 可以这样修复

  //const Hello = hello;

  //return ;

}

最好是定义的时候就定义成大写字母开头的：
 

import React from 'react';

 

// Correct! This is a component and should be capitalized:

function Hello(props) {

  // Correct! This use of 
 is legitimate because div is a valid HTML tag:

  return 
Hello {props.toWhat}
;

}

 

function HelloWorld() {

  // Correct! React knows  is a component because it's capitalized.

  return ;

}

JSX Type用.表达式
 
如果你只有一个moduleexport了很多React components，那么可以用.表达式直接访问，比如：
 

import React from 'react';

 

const MyComponents = {

  DatePicker: function DatePicker(props) {

    return 
Imagine a {props.color} datepicker here.
;

  }

}

 

function BlueDatePicker() {

  return ;

}

运行时候动态选择组件类型
 
React组件的类型不能是一个表达式。如果需要根据运行时的状态（比如props的某个值）来渲染不同的组件类型， 可以先把表达式赋值给某个大写字母开头的变量。
 

import React from 'react';

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

 

const components = {

  photo: PhotoStory,

  video: VideoStory

};

 

function Story(props) {

  // Wrong! JSX type can't be an expression.

  return [props.storyType] story={props.story} />;

}

这样才可以：
 

function Story(props) {

  // Correct! JSX type can be a capitalized variable.

  const SpecificStory = components[props.storyType];

  return ;

}

JSX的props
 
JSX中props的值可以是很多种类型。
 
JS表达式
 

字符串
 
下面两种写法是一样的， 当然我们一般用第一种，因为简单啊！
 

不指定值默认是true
 
下面两者等价，不过官方说不推荐第一种，因为容易与ES6 object shorthand的写法{autocomplete}表达的是{autocomplete: autocomplete}混淆，官方提供这种写法只是为了跟HTML保持一致。
 

展开object
 
如果父组件传递的props你想全部传递给子组件，用…展开object操作符会很方便，这个也是ES6的新特性Spread syntax。
 

function App1(props) {

  return ;

}

 

function App2(props) {

  return ;

}

 

不过这个功能要慎用，我见过很多人不管父组件传递过来的props包含多少个属性，统统都直接{…props}传递给子组件，而其实父组件传递过来的props可能有10个属性，而子组件只需要1个。而且这样写也看不出来子组件具体需要那几个参数，所以如果不是特别多的话，最好还是显示地写出来传递的props值。记住：
 
Explicit is better than implicit.。
 
子组件
 
JSX中在开标签和闭标签之间的内容会通过props.children传递给组件，值的类型有很多种。
 
字符串
 
Hello, React!
上述写法ComponentA中可以通过props.children拿到字符串Hello, React!。字符串是unescaped的，所以<>需要转义之后传递<>。
JSX会把下面这些空白去掉：
 
每行开始和结尾的空白
空行会去掉
挨着标签的换行会去掉
字符串中间的很多换行会合并成一个空格
字符串中间的空格不会去除，不过HTML显示的时候本身多个空格只会显示一个
所以下面这几种都是一样的， 大家可以合理利用空白来增强代码的阅读性。
 
 

   
Hello World


 

    


      Hello            World

    


 

    


      Hello

 

      World

    


 

    


 

      Hello World

    

JSX组件
 
跟HTML一样，JSX组件可以嵌套，不同种类的子组件也可以混用，比如：
 

  Here is a list:

  


    
Item 1


    
Item 2


  


  sth...

  

JS表达式
 
比如：
 

foo

 

{'foo'}

 

{1 + 2 * 3}

这种方式用来循环渲染列表的时候很适合，如：
 

function Item(props) {

  return 
{props.message}
;

}

 

function TodoList() {

  const todos = ['finish doc', 'submit pr', 'nag dan to review'];

  return (

    


      {todos.map((message) => )}

    


  );

}

函数！！！
 
JS里面函数是第一等公民，也是可以像数字、字符串一样传递的。当然传递一个函数拿来显示会很奇怪（试一下，发现不会渲染，除非调用toString()转化为String），所以一般传递过去的函数会被调用进行一些转换，转化为React可以渲染的东西。
 

// Calls the children callback numTimes to produce a repeated component

function Repeat(props) {

  let items = ;

  for (let i = 0; i < props.numTimes; i++) {

    items.push(props.children(i));

  }

  return 
{items}
;

}

 

function ListOfTenThings() {

  return (

    

      {(index) => 
This is item {index} in the list
}

    

  );

}

Booleans, Null, Undefined会被忽略
 
false, null, undefined, 以及true都是合法的子元素，但是不会被渲染出来。下面这些JSX渲染出来对的都是一样的： 空元素！
 

 



 

{false}


 

{null}


 

{undefined}


 

{true}

这样做条件渲染就比较方便了，下面这样写的话只有showHeader为true的时候

  {showHeader && 
}

  

  {props.messages.length &&

    

  }

  {props.messages.length > 0 &&

    

  }

value is {String(true)}

value is {'' + null}

value is {`${undefined}`}