…атрибуты в компоненте react-native функции

#javascript #react-native #spread-syntax

#javascript #react-native #spread-синтаксис

Вопрос:

У меня есть следующий функциональный компонент в приложении react-native. Во второй строке кода есть ...attributes что-то, что сбивает с толку. Хотя я понимаю, что он представляет синтаксис распространения в более новой версии JavaScript, но я не могу найти, что это attributes значит. Если это сказано ..props , то это понятно. Я попытался погуглить, но не смог найти подходящего ответа.

Вопрос

Что 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>
  );
};
  

Комментарии:

1. Откуда взят код??

2. Это компонент, который я вижу в приложении react native.

Ответ №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' }

Комментарии:

1. Отличный ответ. Спасибо. Это ..attributes означало бы, что константа атрибутов будет содержать все, кроме следующих свойств: loading, loaderColor, loaderText. Классная конструкция. Возвращаясь к компоненту в фрагменте ocd, я думаю ...attributes , что он на самом деле не нужен в приведенном выше коде, поскольку он не используется в компоненте Loader. Было бы достаточно использовать деструктурирование объекта для установки loading, loaderColor, loaderText с использованием этой строки кода: {loading, loaderColor, loaderText} = props;

2. Один вопрос, связанный с вашим примером <Loader loading foo="bar" /> того, где свойство loading не задано. Устанавливается ли для него автоматически значение undefined или null?