Как лучше переписать условие?

Question

[historydev]

В зависимости от того, есть ли (props?: IFooterProps) и передан ли в него (button?: React.ReactNode) мне нужно вывести разные View в рамках одного контейнера.
Мне кажется я сделал не совсем хорошо, т.к. дублируется контейнер (View style={styles.container}):

export const Footer = (props?: IFooterProps) => {
    return props?.button ? (
        <View style={styles.container}>
            <RNHoleView style={styles.background} holes={[hole]}>
                <View style={styles.maskBorder}></View>
            </RNHoleView>
            {props.button}
        </View>
    ) : (
        <View style={styles.container}>
            <View style={styles.background}></View>
        </View>
    );
};

Как написать условие правильно?

Comments

[WbICHA]

В зависимости от того, есть ли (props?: IFooterProps)

А его может не быть?

Как написать условие, чтобы в рамках одних круглых скобок и одного контейнера выводить разные View правильно?

Што?

[historydev]

WbICHA,

Што?

Выражение (ReactNode), не знаю как называется.

А его может не быть?

Конечно нет, я специально выделил тип.

Answer 1

[Андрей]

export const Footer = (props?: IFooterProps) => {
    return (
        <View style={styles.container}>
            {props && props.button ? (
              <>
                 <RNHoleView style={styles.background} holes={[hole]}>
                      <View style={styles.maskBorder}></View>
                  </RNHoleView>
                  {props.button}
               </>
            ) : (
              <View style={styles.background}></View>
            )}
        </View>
    );
};

Comments

[historydev]

Если есть ещё идеи, покороче, я бы посмотрел

[Андрей]

Можно вынести в константу, но короче от этого не станет, в JSX/TSX только так)

export const Footer = (props?: IFooterProps) => {
    const body = props?.button ? (
      <>
        <RNHoleView style={styles.background} holes={[hole]}>
          <View style={styles.maskBorder}></View>
        </RNHoleView>
        {props.button}
      </>
    ) : (
      <View style={styles.background}></View>
    );

    return (
      <View style={styles.container}>
        {body}
      </View>
    );
};

[historydev]

Андрей,
Я бы тогда элементы в константу выносил, иначе смысла нет.
Но в целом да, по всей видимости это самое правильное решение в данной ситуации, спасибо.

Answer 2

[Elaryks]

export const Footer = (props?: IFooterProps) => {
  return (
    <View style={styles.container}>
      {props?.button ? (
        <>
          <RNHoleView style={styles.background} holes={[hole]}>
            <View style={styles.maskBorder}></View>
          </RNHoleView>
          {props.button}
        </>
      ) : (
        <View style={styles.background}></View>
      )}
    </View>
  );
};