2018.10.18 星期四 9:46

react

api

&&运算符

1. &&运算符导致的React UI界面错误

但实际上，当该list长度为0时，经过&&运算符判断，则会在页面展示一个0，并不是什么都没有！那这不就出现了页面错误嘛！！！！！！

const Demo = () => {
    return (
        list.length && (
        <div className="name-list-container">
            {list.map((name) => {
            return <div className="name-list-item">{name}</div>;
            })}
        </div>
        )
  );
}
``` 
#### 2. &&运算符的工作原理是什么？
那这种错误是React本身造成的吗？经过深入研究，并不是React本身的问题，而要将问题归结于JavaScript的工作原理上。
&& 运算符是逻辑与运算符，它的工作原理是：当它的两个操作数都为真（true）时，它返回 true，否则返回 false。

在 JavaScript 中，当使用 && 运算符判断 DOM 渲染时，如果某个元素的值为 0、null、undefined、false 或空字符串（''），则该元素被视为假（false），因此 && 运算符将返回该元素的值（即 0）。

```js
const a = "example";
const b = 0;
const c = 1;
console.log(a && b);    // 0
console.log(a && c);    // 1
console.log(b && c);    // 0
console.log(c && b);    // 0
console.log(c && a);    // example
console.log(b && a);    // 0

3. 如何正确使用&&运算符，或者用什么来替代&&？

// ①使用list.length >= 1
list.length >= 1 && <div>"hello list" </div>;

// ②使用!!list.length
// 将数组的长度强制转化为布尔值。
!!list.length && <div>"hello list" </div>;

// ③使用三元表达式
// 如果需要判断的条件场景只有3种以下，三元表达式是很好的解决办法~非常推荐
list.length ? <div>"hello list" </div> : null;

插件

拖拽排序

react-drag-sortable

react-drag-sortable-plus：https://github.com/yalhu/react-drag-sortable-plus

.draggable {
  cursor: move;
  margin-bottom: 10px;
}
// 复制的元素
.dragged {
  width: 349px;
  background:#d9d9d9;
  opacity: 0.7;
}
// 被复制元素
.placeholder {
  opacity: 0.5;
}