反应原生，三点是什么意思 '...这'

Question

下面的代码是 React Native 演示中的一段 我的疑问是"...这'在这段代码中 谢谢

render: function() {
        return (
          <View style={styles.container}>
            <View
              style={styles.center}
              {...this._panResponder.panHandlers}
            >
              <Text>Like</Text>
              <Text>You selected: {this.state.selected}</Text>
              <Animated.View 
                style={[styles.likeContainer, this.getLikeContainerStyle()]}
              >
                <View style={styles.borderContainer} />
                <View style={styles.imgContainer}>
                  {this.getImages()}
                </View>
              </Animated.View>
            </View>
          </View>
        );
      }

Answer 1

如果您想处理...算子。https://facebook.github.io/react/docs/jsx-spread.html

如果您不知道哪些 props 将传递给组件，则可以使用 spread 属性。...三个点在 JSX 中称为扩散运算符。

ES6 中的数组已经支持 ... 运算符（或扩展运算符）。还有一个针对对象休息和扩展属性的 ECMAScript 建议。您可以利用这一点并传递道具，而无需显式编写它们。

Answer 2

panHandlers 的所有属性都作为道具传递给视图。 ...称为点差运算符。

"扩展运算符允许在需要多个参数（用于函数调用）或多个元素（用于数组文本）的地方扩展表达式。"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 3

...是新的 ES6 扩展运算符功能，用于替换多个数组参数。参考： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

react 中 spread 运算符的一个更好的用例是将所有值传递到数组panHandlers就像在你的代码中作为 prop 一样