React & es6 : 返回中的条件渲染答案

【问题标题】：React & es6 : Conditional rendering in a returnReact & es6 : 返回中的条件渲染
【发布时间】：2018-06-12 21:31:45
【问题描述】：

首先，我检查我是否处于编辑或创建模式，然后如果我处于编辑模式，我想隐藏一些字段：

 render() {
    const isEdit = activity ? 'EDIT' : 'ADD';    
    return ({if (isEdit === 'ADD') {
       <div className="col-12 col-md-6">
          <Field
             name="opportunityContactEmail"
             fullWidth
             component={TextField}
             floatingLabelText={renderLabel('ACTIVITY_ADMIN_FORM_EMAIL')}
           />                
       </div>
    }
 }

但它不起作用，最好的解决方案是什么？

【问题讨论】：

isEdit = 'ADD' 是将值分配给变量，而不是布尔运算符。 if (isEdit = 'ADD') 好像很不对。
您的const 和if 语句可以重写为if (!activity)

标签： reactjs ecmascript-6

【解决方案1】：

return !activity && <div ....>...</div>

或者你可以这样做：

render() {
  if (activity) return null;
  return <div ....>...</div>;
}

不确定您的activity 是在哪里声明的。它可能应该是一个状态/道具。

【讨论】：