react 杂记
1 className={} style={{}}得原因：
react的普遍写法一个{}代表里面是一个可执行的代码块，className只有一个{}，而style之所以有两个{},是因为react里的style需要是一个对象，所以就多出了一个{}来包住样式属性，使其成为一个对象，所以当要实现多个行内样式，就是在正常写法的一个{}里面执行三目运算，将多个样式用{}包住，令其成为一个三目运算的结果，而另一个结果可以是''，null,{}
例子：style={this.state.show?{background:"#e5effd",border:"1px solid #99C7F4"}:null}
动态添加类名：
1 多个class
className={`${styles.tableCell} ${styles.cell}`}
//或者
className={[styles.tableCell,styles.cell].join(' ')}
2 两个class
第一种
className={`${styles.tb} ${item.tbColor===null?styles.gray:item.tbColor=='RED'?styles.red:styles.green}`}
第二种
className={this.state.end=='left'?`${styles.idicatorList_left} ${styles.clickUseless}`:styles.idicatorList_left}
2 （） {} jsx
function NumberList(props) {
var numbers; //声明在外面是因为 {} 中不能出现var,const,let等这种关键字
return (
<ul>
{
numbers = props.numbers, //注意这里要加逗号
numbers.map((number) =>
<ListItem key={number}
value={number} />
)}
</ul>
);
}
4组件名称必须以大写字母开头
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
- 在 React 中另一个不同点是你不能通过返回
false的方式阻止默认行为。你必须显式的使用preventDefault -
function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }
