Как написать условное выражение if-else в реакции jsx
Я пытаюсь создать оператор условия для URL-адреса, по которому щелкнет пользователь,
что я хочу сделать, так это проверить, если message.sender.id === user_id, то я хочу изменить URL-адрес на ${/inbox/}${message.reciever.id}${"/"} и если message.sender.id !=== user_id мне нужен URL-адрес ${/inbox/}${message.sender.id}${"/"}
я не знаю, как лучше всего это сделать, потому что URL-адрес должен быть на карте
{
message.map((message) => (
<Link className = "chat-contacts-item" to = {message.sender.id === user_id && `${/inbox/}${message.reciever.id}${"/"}`}>
<p className = "float-left">{message.message}</p>
</Link>
)
)}
<Link className = "chat-contacts-item" to = {message.sender.id === user_id &&`${/inbox/}${ message.reciever.id}${'/'}`}>
Click Now
</Link>
Это то, что я написал, как написать оператор else здесь
{message.sender.id === user_id &&
`${/inbox/}${ message.reciever.id}${'/'}`
}
Вы можете использовать «тройной оператор» `условие === что-то? "правда" : "неправда"`
если использовать :, он возвращает синтаксические ошибки
@DestinyFranks Вероятно, вы забыли добавить обратные кавычки. stackoverflow превращает их в поле кода. Убедитесь, что ваши истинные и ложные утверждения заключены в обратные кавычки, как в вашем примере.
Пожалуйста, ищите официальные документы.
Пожалуйста ищите перед публикацией. Подробнее о поиске здесь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете определить ссылку перед возвратом пользовательского интерфейса, его более читаемого кода.
Кроме того, вы можете использовать то же условие внутри to = {..}
Мы называем это тернарным оператором something ? do this : else do this
Я надеюсь, что этот ответ может помочь.
{message.map((message) => {
const link = message.sender.id === user_id ? `${/inbox/}${message.reciever.id}${"/"}` : `${/inbox/}${message.sender.id}${"/"}`
return (<Link className = "chat-contacts-item" to = {link}>
<p className = "float-left">{message.message}</p>
</Link>
)
})}
<Link
className = "chat-contacts-item"
to = {"/inbox/" + (message.sender.id === user_id ? message.reciever.id : message.sender.id) + "/"}
>
<p className = "float-left">{message.message}</p>
</Link>
Самый чистый способ сделать это, на мой взгляд:
{
message.map((message) => (
<Link
className='chat-contacts-item'
to = {`${/inbox/}${
message.sender.id === user_id ? message.receiver.id : message.sender.id
}${'/'}`}
>
<p className='float-left'>{message.message}</p>
</Link>
));
}
{message.sender.id === user_id ? ${/inbox/}${ message.reciever.id}${'/'} : ${/inbox/}${message.reciever.id}${'/'}}отсутствует обратная кавычка из-за того, как форматируются комментарии, но вам просто нужно добавить их для строк