тернарный оператор внутри тега компонента

Question

Можно ли использовать тернарный оператор во встроенном теге компонента? Например, я использую Touchable Opacity из React Native (Native Base):

type ItemProps = {
  title: string;
  face: string;
};

export const Item: React.FunctionComponent<ItemProps> = ({
  title,
  face,
}) => {

  const [showAddFriendPage, setShowAddFriendPage] = useState(false);

  const toggleAddFriendPage = () => {
    setShowAddFriendPage(showAddFriendPage ? false : true);
  };

  return (
    <TouchableOpacity activeOpacity={0.8}
    onPress={() =>
      setShowAddFriendPage(true)
    }   >
      <View>
        <Thumbnail small source={{ uri: face }} style={styles.thumbnail} />
        <Text numberOfLines={1} style={styles.title}>
          {title}
        </Text>
        <AddFriendPage
          showAddFriendPage={showAddFriendPage}
          toggleShowPage={toggleAddFriendPage}
        />
      </View>
    </TouchableOpacity>
  );
};

В настоящее время навигация onPress применяется ко всем элементам независимо от того, какой заголовок или лицо были использованы. Я хочу ввести условную навигацию. Например, если

title == 'news'

, то onPress.... Поскольку мы не можем использовать операторы if else в jsx, я пробовал тернарные операторы:

 <TouchableOpacity activeOpacity={0.8}
 {title == 'news'? {
      onPress={() =>
      setShowAddFriendPage(true)
    }   
    } }
/>

Но это явно не работает. Я получаю '...' expected. на title.

No value exists in scope for the shorthand property 'onPress'. Either declare one or provide an initializer.ts(18004) на onPress и

Cannot find name 'setShowAddFriendPage'.

Answer 1

можно так

         <TouchableOpacity activeOpacity={0.8}
              onPress={() =>{
               if(title == 'news'){
                setShowAddFriendPage(true)
                }
          }}   
          />

Answer 2

Используйте useCallback, чтобы создать функцию onPress, которая имеет другое поведение в зависимости от вашего состояния.

const onPress = useCallback(() => {
  if (title === 'news') {
    setShowAddFriendPage(true)
  }
}, [title])

Она зависит от title, поэтому она будет будет воссоздан заново, и компонент будет повторно визуализирован только в случае изменения title.

Затем используйте его как таковое:

<TouchableOpacity activeOpacity={0.8} onPress={onPress}>
  {/* … */}
</TouchableOpacity>

Answer 3

Вы можете использовать оператор распространения (...) для условного добавления свойств к компонентам.

<TouchableOpacity
    activeOpacity={0.8}
    {...(title == 'news' && { onPress: () => setShowAddFriendPage(true) })}
/>

Таким образом, компонент будет иметь свойство onPress, если заголовок равен 'news'