Блог

у меня есть код, как показано ниже,

 const ParentComponent = ({data}: {data: Array<DataType>}) => {
    const version = data.version; //version is an array
    const type = data.type; //type is an object
    const renderContent = () => {
        return (
            <Flex flexDirection="column">
                <div>version</div> //this to be displayed if version not empty
                <div>{version}</div> // this to be displayed if version is not empty
                <div>type</div> //this to be shown if type has name or version
                <div>{type.name} {type.number}</div> //this to be shown if type has 
                // name or version 
            </Flex>
        ); 
    }

    return(
        <>
            <Flex>
                <div>
                    <input type="checkbox" /> 
                </div>
            </Flex>
            <Icon name="help" /> //this to be displayed only when version is not 
            //empty array or type has name or number
        </>
    );
}
 

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

и в rendercontent должен отображаться div с версией, если версия не пуста, и div с типом, который должен отображаться, если у типа есть имя или версия.

как я могу это сделать, может ли кто — нибудь помочь мне в этом. я новичок в программировании и обучаюсь на ходу. Спасибо.

Вы можете сделать это просто путем условного рендеринга

 const ParentComponent = ({data}: {data: Array<DataType>}) => {
    const version = data.version; //version is an array
    const type = data.type; //type is an object
    const renderContent = () => {
        return (
            <Flex flexDirection="column">
                {version amp;amp; version.length ?  (
                    <>
                      <div>version</div> //this to be displayed if version not empty
                      <div>{version}</div> // this to be displayed if version is not empty
                    </>
                 ) : null}
                  {(type.version || type.name) ? (
                     <>
                     <div>type</div> //this to be shown if type has name or version
                     <div>{type.name} {type.number}</div> //this to be shown if type has 
                // name or version 
                    </>
                  ) : null}
          
            </Flex>
        ); 
    }

    return(
        <>
            <Flex>
                <div>
                    <input type="checkbox" /> 
                </div>
            </Flex>
             {version amp;amp; version.length ? (
               <Icon name="help" /> //this to be displayed only when version is not 
            //empty array or type has name or number
             )}
            
        </>
    );
}