...react-native 函数组件中的属性

Question

我在 react-native 应用程序中有以下功能组件。在第二行代码中，有一个令人困惑的 ...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>
  );
};

Answer 1

attributes 是包含来自 props.

的其余属性的新创建常量的名称

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

所以如果你像这样使用你的组件 <Loader loading foo="bar" /> 那么 attributes 将等于 { foo: 'bar' }

...react-native 函数组件中的属性

...attributes in react-native function component

javascript

react-native

spread-syntax