React - 事件绑定 & 样式绑定

React中两种事件绑定方式

// 1
<div onClick={this.handle.bind(this)}>点击</div>

handle () {
  // do something
}

// 2
<div onClick={this.handle}>点击</div>

handle = () => {
  // do something
}

第二种方式声明变量并使用匿名函数赋值，在绑定事件时直接调用this.handle

React中两种行内样式绑定方式

// 1
<div style={{ padding: '10px', backgroundColor: 'red' }}>something</div>

// 2
var style = { 
  padding: '10px',
  backgroundColor: 'red'
}

<div style={style}>something</div>

第一种方式中，因为样式是一个对象的集合，所以需要一层大括号包裹。

在React中使用的是JSX语法，所以代码的语法需要参照JS，在JSX中写样式时不能再使用CSS的语法。例如：属性名含有有连接符的需要变成驼峰法命名，如：backgroundColor: 'red'；属性值需要加引号，如：'10px'。