Показывать/скрывать элементы динамически. React Native

Question

Имеется компонент

import React, {useState} from "react";
import { View, StyleSheet, Text } from "react-native";

import ErrorIcon from "../icons-svg/error_icon";
import colors from "../../config/colors";

export function ErrorElement(props) {
    const [isVisible, setVisible] = useState(true);

    function ErrorView() {
        return(
            <View style={styles.errorStatusContainer} >
            <ErrorIcon style={styles.icon}/>
            <Text 
                numberOfLines={1} 
                style={styles.textContainer} >
                {props.text}
            </Text>
        </View>
        )
    };
    return(
        isVisible ? <ErrorView /> : null
    )
}

const styles = StyleSheet.create({
    errorStatusContainer:{
        flexDirection: "row",
        backgroundColor:colors.background_light_grey,
        width:"80%",
        height:45,
        marginTop:10,
        borderRadius:15,
        alignItems:"center"
    },
    icon:{
        margin:10
    },
    textContainer:{
        width:"80%"
    }
})

Который возвращает просто иконку с текстом ошибки.

Вполне возможно, что я не понимаю React и делаю ошибку в логике написанного. Но стараюсь следовать документации.

Вопрос такой: как можно изменять состояние извне? То есть обращаться к setVisible для изменения переменной isVisible.

Проработанные примеры содержат непосредственно функцию в самом компоненте и вызывают ее при наступлении события, который связан с ним. Например, нажатие кнопки или тап по элементу на экране etc.

Моя цель это использовать данный компонент с функцией скрыть/показать не привязываясь к какому-то конекретному событию.

Answer 1

Решение выглядит следующим образом
В родителе где я использую компонент errorElement я создаю такую сущность

<ErrorElement 
  key={register}
  text={message}
  showValue={value}
  isShow={Boolean(errorRegisters[register]) !== Boolean(value)}
        />

Для хранения состояния использую useState хук. Согласно документации необходимо размещать их сразу после объявления функции и выглядит вот так

const [errorRegisters, setErrorRegisters] = useState(()=>{
    let values = {};
            values[register] = Boolean(value);
        }
    }
    return values
})

И так же пишу логику для обновления состояния как колбэк функцию для setErrorRegisters

Теперь при обновлении состояния будет обновляться и сам элемент и чтобы его вывести на экран отрендеренным я использовал такую проверку через useEffect() хук, который срабатывает только при изменении сущности errorRegisters

let showEl = [];
useEffect(() => {
    if (item.props.isShow === true) {
        showEl.push(item);
    }
},[errorRegisters])

И как итог это рендер

return(
    <View>
        {showEl}
    </View>
)

В реале логика завязана на массив таких элементов и работает при наступлении событий, которые не связаны с действиями пользователя на экране телефона, поэтому весь код не пихаю, а пробежался только по контрольным пунктам.

Знатоки, укажите на косяки и недостатки.

БЛОГ НА HUSL

Показывать/скрывать элементы динамически. React Native

Ответы (1 шт):