不常见使用的css

flex和white-space等属性

1.flex属性让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。style={{flex:5}},该元素占父元素的六分之五。

2. white-space:nowrap;用于处理元素内的空白，只在一行内显示。

3. text-overflow:ellipsis;超出部分显示省略号。

组件的css导入时会加上___xxxxx渲染成唯一标识，所以有些样式需要在index.html上修改覆盖。

react动态改变html元素:

function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

关于select

1. select和option不能使用居中的属性---text-align: center; 解决方法： 使用&nbsp; 这种HACK方法强行解决。

2. select中的option时没有click事件的。 解决方法： 如果我们想要得知select的最新的值，那我们就得使用select的onchange事件。

3. select会出现和input与button的height设定的相等，但是实际上不等的情况。 解决方法：border: 0; outline: 0 none;

4. 我们通过select.value即可得到目前的select中被选中的值。onchange事件 this.options[this.options.selectedIndex].value

关于input

input中的autofocus属性在第一次使用时是可以的，但是后面我们设置位ele.style.display = "none"以及ele.style.display = "block"时这个属性就不能用了，我们必须手动使用document.querySelector("input").focus()这个js中原生的focus方法来解决autofocus有时不能解决问题的问题。

display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;