JSX 允许在大括号中嵌入任何表达式，需要注意的事项（请看注释）：

var ListItem = (props) => {       //es6中箭头函数
    return <li>{props.value}</li>;
}

function NumberList(props) {
    var numbers;    //声明在外面是因为 {} 中不能出现var,const,let等这种关键字
    return (
    <ul>
      {
        numbers = props.numbers,   //注意这里要加逗号

        numbers.map((number) =>
        <ListItem key={number}
         value={number} />
      )}
    </ul>
    );
}

var arr = [1,2,3];   //要传递的参数
ReactDOM.render(
    <NumberList numbers={arr}/>,  //这里的numbers就是props下的numbers,即props.numbers
    document.all('example')
);

handleToggleClick(){    
  this.setState(prevState=>({ // 这里 prevState 
      showWarning:!prevState.showWarning 
    })
  );
}

以上代码 prevState 如何传递？

setState() 可以接收一个函数，这个函数接受两个参数，第一个参数表示上一个状态值，第二参数表示当前的 props：

this.setState((prevState, props) => ({
    //do something here
}));

通过条件渲染页面：

首先建一个函数，来根据不同的情况返回不同的值，然后建一个类组建，先进行变量的初始化，对变量进行操作，在组件内进行小的渲染，最后通过 ReactDOM.render() 渲染到页面上。

为什么要进行变量的初始化？

一个软件所分配到的空间中极可能存在着以前其他软件使用过后的残留数据，这些数据被称之为垃圾数据。所以通常情况下我们为一个变量，为一个数组，分配好存储空间之后都要对该内存空间初始化。

简单来说就是清理残留数据。

理解 React 中 es6 创建组件 this 的方法

在JavaScript中，this对象是运行时基于函数的执行环境（也就是上下文）绑定的。

从 react 中的 demo 说起

Facebook最近一次更新react时，将es6中的class加入了组件的创建方式当中。Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类。官方的demo：

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

上面的demo中有大量this的使用，在 class LikeButton extends React.Component 中我们是声明该class，因为this具体是由其上下文决定的，因此在类定义中我们无法得知this用法。 相当于是new了上面定义的类，首先调用 constructor() 函数， this.state 的this上下文就是该实例对象；同理，render() 函数中 this.state.liked 的this上下文也是该对象。问题在于 onClick={this.handleClick} ，获取该函数引用是没有问题，这里的this上下文就是该对象。

这时问题来了，在原来 React.createClass 中， handleClick() 在onClick事件触发的时候，会自动绑定到LikeButton实例上，这时候该函数的this的上下文就是该实例。不过在ES6的class的写法中，Facebook取消了自动绑定，实例化LikeButton后，handleClick()的上下文是div的支撑实例（ backing instance ），而 handleClick() 原本要绑定的上下文是LikeButton的实例。对于该问题，我们有多种解决方案。

使用 bind() 函数改变 this 的上下文

可以在class声明中的constructor()函数中，使用：

this.handleClick = this.handleClick.bind(this);

该方法是一个bind()绑定，多次使用。在该方法中，我们在声明该实例后，可以在该实例任何地方使用 handleClick() 函数，并且该 handleClick() 函数的this的上下文都是LikeButton实例对象。

除此我们也可以在具体使用该函数的地方绑定this的上下文到LikeButton实例对象，代码如下：

<div onClick={this.handleClick.bind(this)}>
  You {text} this. Click to toggle.
</div>

这种方法需要我们每次使用bind()函数绑定到组件对象上。

es6的箭头函数

es6中新加入了箭头函数=>，箭头函数除了方便之外还有而一个特征就是将函数的this绑定到其定义时所在的上下文。这个特征也可以帮助我们解决这个问题。使用如下代码：

<div onClick={() => this.handleClick()}>
  You {text} this. Click to toggle.
</div>

这样该 this.handleClick() 的上下文就会被绑定到 LikeButton 的实例对象上。个人认为，使用箭头函数使得 JavaScript 更加接近面向对象的编程风格。

this 的总结

this 的本质就是：this跟作用域无关的，只跟执行上下文有关。

React 点击事件的 bind(this) 如何传参?

需要通过 bind 方法来绑定参数，第一个参数指向 this,第二个参数开始才是事件函数接收到的参数:

<button onClick={this.handleClick.bind(this, props0, props1, ...}></button>
 
handleClick(porps0, props1, ..., event) {
    // your code here
}

事件：this.handleclick.bind(this，要传的参数)

函数：handleclick(传过来的参数，event)

从 render 中传递参数到 外部函数 one():

class Ex extends React.Component{

....  this.state={name:'Stupid Dog'};

... ... ...

function one(para){
    console.log('parameter in one Func',para);
}

... ... ...

render(){    
    var mm='AABB';
    return (<div><button onClick={this.one.bind(this,mm)}> test</button>
    <button onClick={this.one.bind(this,this.state.name)}> test</button></div>);

}}