1. css文字隐藏，hover上去显示全部。
有些时候文字太长，但布局规定的范围可能给不了那么长，因此需要值显示一部分，hover的时候再显示全部。
其实这个操作已经有了，不需要我们再操作的，通过下面的代码就能实现，不需要写多余的代码。
<p title="我爱夏天的风，冬天的雪，夏天的雨，和你的眼眸。">我爱夏天的风，冬天的雪，夏天的雨，和你的眼眸。</p>
p{
width:40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: brown;
font-size: 12px;
color: white;
}
补充： 其实也可以自己写，但这样就会有两个hover显示全部文字了。
利用属性选自器和伪元素，为伪元素的content设置 attr(title)。
p[title]{
width:40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: brown;
font-size: 12px;
color: white;
}
p[title]::before{
content: attr(title);
position: absolute;
background: #F2F2F2;
border: 1px solid #E5E5E5;
box-shadow: 0 2px 4px 0 rgba(56,62,71,0.10);
border-radius: 2px;
padding: 2px 6px;
font-size: 13px;
color: #202332;
top:106px; // 设置位置
left: 10px; // 设置位置
max-width: 90%;
word-break: break-word; // 如果一个单词太长，则截断 CSS 属性 word-break 指定了怎样在单词内断行。
white-space: normal;// 可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。
}
2. && 与 条件 if
/**
从接口拿到的数据，一般要判断指针，避免空指针异常。
在渲染时 list && list.map( v => {} ) 如果list的值为 undefined 、 null 、 '' ,false, 后面的语句不会map。
也可以这么写。
*/
( list
? list
: []
).map( v => {})
/**
上面这种方式会在list的值为空时( undefined 、 null 、 '' ,false),取空数组。
空数组map,map中的回调函数不会执行！ map和foreach一样，被遍历数组有几个元素，回调执行几次，反之一个元素都没有，那么回调一次都不执行。
在if判断时， 如果list的值为undefined 、 null 、 '' ,false, 则不执行该条件语句
*/
if( list ) {}
/**
无论是 list && list.map 或是 ( list
? list
: []
).map( v => {})
都只能判断值不为 undefined 、 null 、 '' ,false 的情况。如果数据是一个空对象，是满足不为四种情况的，因此都会map，
而此时空对象map就会报错，因为对象没有map方法。
ps : 一般遍历数据，基本上对数据结构很清楚，因此不需要做过多限制，而有时在没数据或其他情况下，对一个数据进行map， 即使有了
list && list.map 或是 ( list
? list
: []
).map( v => {}) 这样的操作也是会报错的，因为数据格式不是一个数组，而我们又没有对遍历数据做遍历前的限制。
*/
// 当map 不是一个数组时可能会报的错
xx.map is not defined
xx.map is not a function
// 限制遍历数据的 限制(一定为一个数组时遍历，其他情况不遍历)
// Array.isArray(list) 检测数据是否为数组，若是，返回true（包含空数组）
list && Array.isArray(list) && list.map( v => {})
3. Ant-Design Table 可设置最大高度
// 经这样一操作， table 有了一个最大高maxHeight 和overflowY
// x ,y (横向、纵向滚动，也可用于指定滚动区域的宽、高)
const getHeight = () => {
const heights = document.queruSelect('.abc')
return heights.offsetHeight ? heights.offsetHeight - 150 : 300
}
<Table
..
...
...
scroll={{ y : getHeight()}}
>
待续...
4. mobx 使用心得
/**
组件通信通过props传值，子组件 通过this.props || props 接收，这样麻烦而且有一些局限性。
而mobx 就是一个store, 类似数据处、存储库的东西，你完全可以把接口拿到的数据在mobx中处理好，然后直接传给jsx。
mobx中的 @oberserver 就好比声明了一个变量，初始值是一个定值，这并不重要。
@action 动作，其实就是函数，能做一些事情，用它通常用来变更定义的 @oberserver， 实现一些功能 ，
因此你经常会看到这样的定义 ：
*/
@oberserver list = 'aaa'
@action addNameList = () => {
this.list = .... // list是 @oberserver定义的变量
}
/**
以上方法是使用了装饰器的方法
通常定义mobx ，需要写一个class , 在class 中 定义一些 @oberserver 和 @action，
在暴露文件时，要new一下这个暴露的class ，
在store文件建一个index.jsx 引入并再次暴露这些 定义的class 。
在jsx 文件需要注入并监听注入的变量。 注入 @inject("Dbc") @obsrever (若store的值发生了变化则自动更新该jsx文件的值)
使用一个store (class) 中的变量和函数，需要引入，
*/
const {addNameList } = this.props.Dbc
// 对于使用了react hooks的函数组件，需要使用mobx6。
5. 如何处理不同类型的信息版
/**
有些时候需要展示字段完全不同的信息版，这时写多种版面是费力且难写的。
此时我们就需要将switch 封装成一个函数，return 不同的数据就好了。
*/
// util.js
const getInforMation = (item) => {
let InfoContent
switch (item.type) {
case "1" :
InfoContent : [{
name: item.name,
value: item.value
}]
breake ;
case "2" :
InfoContent : [{
name: item.name,
value: item.value
}]
breake ;
}
return InfoContent
}
// Demo.jsx
import {
getInforMation
}
from './util.js'
const renderifferentPanel = (item) => {
const lists = getInforMation(item)
return lists.map( v => {
return <div
className="lists"
key={item.id}
>
<span>{item.name}</span>
<span>{item.value}</span>
</div>
})
}
const panles = (datas) => {
const val = renderifferentPanel(datas)
return <div>
....
....
...
..
{val} // 返回视图
</div>
}
// 补充： 需要在不同的类型下展示不同的页面效果。
// 思路: 根据数值来判断！
const panles = (datas) => {
const val = renderifferentPanel(datas)
return <div className={cx('panles',{'vids',datas.type === '5'})}>
....
....
{datas && datas.type == '5' <span>{datas.Ip}</span>} // type 为 5 时显示
...
..
{val}
</div>
}
.panles{
width: 200px;
heigth: 120px;
}
.vids{
width: 500px !important;
height: 200px !important;
}
6. 有时在请求某些视频时，需要先握手
/**
实际上是在请求视频数据的接口后，在请求成功的情况下， 再发起一次axios请求（需要传递特定的参数）。握手成功，返回视频流数据，若无此次握手，只返回普通数据，不返回视频流？
*/
