Question

在下一个代码中：

     return connectDropTarget(
         <div style={{ ...style, backgroundColor }}>
             {`Works with ${allowedDropEffect} drop effect`}
         <br />
         <br />
             {isActive ? 'Release to drop' : 'Drag a box here'}
         </div>,
    )

有什么样的用途？我看不到任何声明为样式的变量。

Answer 1

它的spread syntax用于复制现有style对象的内容，然后添加/覆盖backgroundColor属性。

const styles = {
    position: 'relative',
    top: 0,
    left: 0
};

const backgroundColor = {
    background: '#FFF'
};

const newStyles = {...styles, backgroundColor };

console.log(newStyles);
// newStyles
// {
//  position: 'relative',
//  top: 0,
//  left: 0,
//  background: '#FFF'
// }

它也可以用来覆盖现有属性，但保持其他属性不变：

const styles = {
    position: 'relative',
    top: 0,
    left: 0,
    background: '#222'
};

const backgroundColor = {
    background: '#FFF'
};

const newStyles = {...styles, backgroundColor };

console.log(newStyles);
// newStyles
// {
//  position: 'relative',
//  top: 0,
//  left: 0,
//  background: '#FFF'
// }

所以它基本上是Object.assign的es6简写。

Answer 2

这意味着style的道具将在它们存在时传递

页面中可能已存在样式和背景：

const style = {fontSize: "9px", backgroundColor: "red"};

运行的另一个es2016 estrange代码

2 个答案: