javascript - ...属性在 react-native 功能组件中
问题描述
我在 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>
);
};
解决方案
attributes
是新创建的常量的名称,其中包含来自 的其余属性props
。
const {
a,
b,
...objectContainingEveryOtherPropertyExceptAB
} = {
a: 1,
b: 2,
c: 3,
d: 4
};
console.log(objectContainingEveryOtherPropertyExceptAB);
所以如果你像这样使用你的组件,<Loader loading foo="bar" />
那么attributes
将等于{ foo: 'bar' }
推荐阅读
- javascript - 如何在 Google Analytics(分析)4 (GA4) 媒体资源中添加引荐排除项
- c++ - 如何使用带有堆栈的结构?
- java - 替换时保存状态片段
- javascript - 在 GraphQL 中传递和检索数组
- reactjs - 在 React 产品列表程序中调用 HandleCheck 方法后状态不反映
- python - 有效地将字典的键和值转换为 pandas 数据框中的列
- javascript - 角度模板中的动态循环
- pandas - 如何从索引中以字符串形式获取突出显示数据或如何将其打印出来?
- javascript - tail.select javascript将选择的内容复制到另一个选择
- docker - 在 docker 上运行 openalpr 但音量不起作用