Question

我正在尝试使用名为<HoverLink />

的类向链接添加悬停

像这样：

import { Hoverable } from 'react-native-web-hooks';

class HoverLink extends Component {

    render() {
        return (
            <Hoverable >
                {isHovered => (
                    <View accessible style={{ backgroundColor: isHovered ? '#333' : '#fff' }}>
                        <Link {...this.props} >{this.props.children}</Link>
                    </View>
                )}
            </Hoverable>
        )
    }
}

这就是我的使用方式：

<HoverLink style={WebPseudoStyles.footerLinks} target="_blank" src="https://resources.allsetlearning.com/chinese/grammar/Main_Page">Chinese Grammar Wiki</HoverLink>

但是，当我尝试传递样式时，会出现以下错误：

Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

如何使用从父级/ HOC传入的样式？我正在寻找是否有办法做到这一点，但我没有看到任何具体的内容。

和WebPseudoStyles：

export const WebPseudoStyles = StyleSheet.create({
    footerLinks: {
        color: footerTextColor,
        textDecoration: "none",
        fontFamily: fontFamily,
        marginBottom: 15
    },
    socialIcons: {
        textDecoration: "none",
        fontFamily: fontFamily,
    },
    socialIconsContainer: {
        backgroundColor: "#1e2234",
        paddingLeft: 10,
        paddingRight: 10, paddingTop: 10,
        paddingBottom: 10,
        marginLeft: 10,
        marginRight: 10,
        width: 50,
        height: 50,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

编辑：

在查看道具时，样式似乎只是一个指针：

children: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
src: "https://www.instagram.com/myinstagram"
style: 134
target: "_blank"

Answer 1

我只是将样式从StyleSheet对象转换为普通的JSON对象。

export const WebPseudoStyles = {
    footerLinks: {
        color: footerTextColor,
        textDecoration: "none",
        fontFamily: fontFamily,
        marginBottom: 15
    },
    socialIcons: {
        textDecoration: "none",
        fontFamily: fontFamily,
    },
    socialIconsContainer: {
        backgroundColor: "#1e2234",
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,
        marginLeft: 10,
        marginRight: 10,
        width: 50,
        height: 50,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
};

此后，它不再是指针，而是实际的对象。

也许不是“ Reish-ish”，但它暂时可以使用。

继承父样式

1 个答案: