Question

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

const { ...props } = props;

代替

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

为什么语句1无效？还是我的语法错误？

编辑：语句1是有效的，我看到我现在是愚蠢的。

我正在寻找的是实现语句2的一种编程方式，因此我不必写出很多道具

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道具

对象使用... props解构所有道具

1 个答案: