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.');  }