javascript - 对象用 ...props 解构所有 Prop

Question

因此，如果我对一个组件有很多不同的 Prop ，我希望我可以做类似的事情

const { ...props } = props;

而不是

const { prop1, prop2, prop3, ... } = props;

为什么语句 1 无效？或者我的语法错误？

编辑:声明 1 是有效的，我发现我现在很愚蠢。

我正在寻找的是一种实现语句 2 的编程方式，这样我就不必编写大量的 props

Answer 1

如果您使用HOCs，选项一很有用。 ，例如在 React Native 中，如果你正在制作动画组件，你可以:

import React from 'react';
import { Animated, Text} from 'react-native';

class ComponentToBeAnimated extends React.Component {
    render() {
        const {...other} = this.props;
        return (
            <Text {...other}>
                hello world
            </Text>
        )
    }
}

export const AnimatedText = Animated.createAnimatedComponent(ComponentToBeAnimated )

然后，当您实例化 AnimatedText 时，您可以像实例化 Text 一样应用样式

import React from 'react';
import { StyleSheet, View} from 'react-native';
import { AnimatedText } from './AnimatedText';

const styles = StyleSheet.create({
    title: {
        fontSize: 19,
        fontWeight: 'bold',
     },
});

export const Message = () => {
    return (
        <View>
            <AnimatedText style={styles.title}/>
        </View>
    )
}

您可以从 HOC 中应用您想要的所有 Text 属性