前端实习周记6

文本节点溢出部分用省略号显示

需求：希望每一个li元素里的内容，超出内容部分区域都可以用...省略号显示一想到溢出部分省略号显示，就可以用

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

但是这样使用并没有生效？这是为什么呢？经过排查发现原因出在

节点身上，text-overflow: ellipsis 属性只适用于设置了宽度的块级元素（block-level elements）和一些特定的行内块级元素（inline-block elements），而不适用于文本节点li。将 text-overflow: ellipsis 应用于 li 元素，也不会对文本内容产生效果。

解决方法：在li里面又嵌套一层span标签，对span标签设置溢出设置

//html
<li><span>具体内容</span></li>
//scss
span {white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;}

引申：

text-overflow: ellipsis 在flex外层布局中（设置display:flex的位置)也会失效，可以在其内部再次嵌套div（设置flex:...)内，在此层级在设置text-overflow: ellipsis 。
text-overflow: ellipsis 失效的原因考虑：
1. 元素是否有宽度
2. 是否为flex布局最外层
3. 是否使用文本元素li

伪元素content必写

需求：在两个select框前添加正方形铺满颜色的小方块

一想到这种需求第一反应就是可以用::before伪元素来做，不会在dom元素上产生节点，但是写出来后调整了宽度和颜色发现其并没有在页面上显示，排查后发现没有写content属性

解决：为伪元素添加content属性，即便没有任何内容，也要写 content:''

.select{
    &::before{
        content:'';
        width:...//
    }
}

Context状态管理

需求：

在某页面架构如
```
-container
	-list  //获取到参数的组件
	-substance
		-echarts
			-day //参数被传递给的组件
```
考虑到状态管理，因为只涉及一个页面及路由，不考虑使用redux；由于要传递多层，但中间组件并不会用到这些参数，不考虑props;所以使用Context.Provider
解决：
1. 创建Context=React.createContext()，从其他页面导出，并在此页面引入
2. 在最外层container包裹<Context.Provider value={...} >，value即为共享的数据，在container组件中，list可通过props传递数据给container，container通过state
3. 在需要使用参数的组件day中引入Context
```
const { value } = useContext(Context)
```
  即可使用value