...归属于本机功能组件

问题描述

我在本机应用程序中具有以下功能组件。在第二行代码中，有...attributes令人困惑。虽然我知道它代表了较新的JavaScript版本中的传播语法，但是我找不到attributes的含义。如果它说..props，那是可以理解的。我试图用Google搜索，但找不到任何合适的答案。

问题

attrributes在下面的第二行代码中表示什么？

  const Loader = (props) => {
  const { loading,loaderColor,loaderText,...attributes } = props;

  return (
    <Modal
      transparent={true}
      animationType={'none'}
      visible={loading}
      onRequestClose={() => {
        console.log('close modal');
      }}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator
            animating={loading}
            color={loaderColor? loaderColor : '#0000ff'}
            size={Platform.OS === 'ios' ? 'large' : 75}
          />
          {loaderText ? (
            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.modalText}>{loaderText}</Text>
            </View>
          ) : (
            ''
          )}
        </View>
      </View>
    </Modal>
  );
};

解决方法

attributes是新创建的常量的名称，其中包含props中的其余属性。

const {
  a,b,...objectContainingEveryOtherPropertyExceptAB
} = {
  a: 1,b: 2,c: 3,d: 4
};
console.log(objectContainingEveryOtherPropertyExceptAB);

因此，如果您像这样<Loader loading foo="bar" />使用组件，则attributes将等于{ foo: 'bar' }