#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?