Reactjs 如何在react中使用三元运算符？

我想用三元运算符代替react中的if-else条件

我想做什么？ 我有一个名为

'list\u info'

的对象类型数组，它具有

类型

、

收件人id

和

收件人电子邮件属性

现在我有了一个名为

“get_text”

的方法，它返回值为字符串“to you”的文本或收件人电子邮件

If the list_info type is "type_1" and props.current_user_id === list_info.recipient_id then it should 
return nothing. 

If the list_info type is "type_1" and props.current_user_id !== list_info.recipient_id then it should 
return the list_info.recipient_email.


Now when the list_info type is anything other than "type_1" and and props.current_user_id === 
list_info.recipient_id then it should 
return string "to you". 

 If the list_info type is anything other than "type_1" and props.current_user_id !== 
 list_info.recipient_id then it should return the list_info.recipient_email.

因此，为了实现上述条件，我采用了如下的“获取文本”方法

get_text = () => {
    const list_info = this.props.list_info;
    let text;
    if (this.props.list_info.type === 'type_1') {
        if (this.props.current_user_id === list_info.recipient_id) {
            text = '';
        } else {
            text = list_info.recipient_email;
        }
    } else {
        text = this.props.current_user_id === list_info.recipient_id
        ? 'you'
        : list_info.recipient_email;
    }
    return <strong key={list_info.type}>{text}</strong>;
};

get_text=（）=>{
const list_info=this.props.list_info；
让文字；
如果（this.props.list_info.type==='type_1'）{
if（this.props.current_user_id==list_info.recipient_id）{
文本=''；
}否则{
text=列表\信息。收件人\电子邮件；
}
}否则{
text=this.props.current\u user\u id==list\u info.recipient\u id
“你是
：列出\u info.recipient\u电子邮件；
}
返回{text}；
};

---

上述代码有效。但我认为使用三元运算符可以使阅读变得更加简单。有人能帮我修一下吗。谢谢。

通常编写嵌套的三元运算符会使代码不可读。您可以按如下方式重构代码，如果您有越来越多的条件/逻辑，您可以开始使用

switch

语句

get_text = () => {
    const { list_info, current_user_id } = this.props;
    const meTextByType = list_info.type === 'type_1' ? "" : "you";
    let text = current_user_id === list_info.recipient_id ? 
               meTextByType :
               list_info.recipient_email;
    return <strong key={list_info.type}>{text}</strong>;
};

get_text=（）=>{
const{list_info，current_user_id}=this.props；
const meTextByType=list\u info.type=='type\u 1'？“”：“你”；
让text=current\u user\u id==list\u info.recipient\u id？
meTextByType：
列出\u info.recipient\u电子邮件；
返回{text}；
};

获取文本=（）=>{
const{list_info，current_user_id}=this.props；
const{type，recipient\u id，recipient\u email}=list\u info；
const meTextByType=type=='type_1'？“”：“你”；
let text=当前用户id==收件人id？meTextByType:收件人电子邮件；
返回{text}；
};

本地函数如何准确描述每种情况，从外观上看，只返回2个值，“给你”或收件人

getText = () => {

  const isToYou = () => listInfoType !== 'type_1' && recipientId === userId

  return isToYou() ? 'To You' : recipientEmail

}

---

三元运算符不是更容易阅读的。嗯，我认为代码更少。。这对我有用：）

getText = () => {

  const isToYou = () => listInfoType !== 'type_1' && recipientId === userId

  return isToYou() ? 'To You' : recipientEmail

}