reactjs - 使用 React Hooks 的条件

Question

如何在 React Hooks 中使用条件？我收到此错误：由于我的 {content}，对象作为 React 子项无效

let content = favorit ? (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_delFromDB(lokal.id));
        }}
    />
) : (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_saveToDB(lokal.id));
        }}
    />
);

React.useLayoutEffect(() => {
    navigation.setOptions({
        headerRight: () => {
            return { content };
        },
    });
}, [navigation]);

标签： reactjsreact-hooks

Answer 1

发生这种情况是因为在您的钩子中您正在返回一个对象。

试试这个方法：

let HeaderRight = () => favorit ? (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_delFromDB(lokal.id));
        }}
    />
) : (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_saveToDB(lokal.id));
        }}
    />
);

React.useLayoutEffect(() => {
    navigation.setOptions({
        headerRight: () => <HeaderRight />,
    });
}, [navigation]);