是否可以在一个花括号中写两个条件？答案

【问题标题】：Is it possible to write two condition in one curly braces?是否可以在一个花括号中写两个条件？
【发布时间】：2019-02-18 14:42:24
【问题描述】：

如果isAllowed 标志为真，我必须根据两个不同的条件渲染两个组件，第一个组件应该显示。如果isAllowed 和isEditMode 为真，则必须显示另一个组件。并且我在相同的渲染方法中有更多的条件取决于isAllowed 标志。

目前我通过实现以下代码实现了这一点。

render(){
 return (
   <div>
    {
       isAllowed && <span> component 1 </span>
    }
    {
       isAllowed && isEditMode && <span> component 2 </span>
    }
    {
       isAllowed && 3 more condition && <span> component 3 </span>
    }
   {
       isAllowed && 4 more condition && <span> component 4 </span>
    }
   </div>
 )
}

我想做isAllowed的普通检查。因为它在这两种情况下都很常见。有可能吗？

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

您可以使用 React Fragment 检查一次 isActive，然后检查其中的 isEditMode。

示例

class App extends React.Component {
  render() {
    const { isAllowed, isEditMode } = this.props;

    return (
      <div>
        {isAllowed && (
          <React.Fragment>
            <span> component 1 </span>
            {isEditMode && <span> component 2 </span>}
          </React.Fragment>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App isAllowed isEditMode />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

你可以使用数组：

render() {
  const components = [];
  if (isAllowed) {
    components.push(<span> component 1 </span>);
    if (isEditMode) {
      components.push(<span> component 2 </span>);
    }
  }
  return <div>{ components }</div>;
}

这提供了更大的灵活性，尤其是当您有许多组件和不同的条件时。当然，您也可以在内联表达式中执行此操作，而不是单独的语句，如果您可以保持可读性：

return <div>{
  isAllowed
    ? [
      <span> component 1 </span>,
      isEditMode ? <span> component 2 </span> : null
    ]
    : null
}</div>

或

return <div>{
  isAllowed && [
    <span> component 1 </span>,
    isEditMode && <span> component 2 </span>
  ]
}</div>

【讨论】：

【解决方案3】：

当然。您可以为此使用三元运算

{isAllowed && <Fragment>{isEditMode ? 'When editing' : 'When not editing'}</Fragment>}

【讨论】：

如果我有第三个条件怎么办？
然后你需要用 isAllowed 条件和内部包装所有条件，以便有多个 if 或开关。
是否可以在大括号内不使用 if。
{condition&&<span/>} - 这相当于 JSX 中的 If 语句
您的答案仅适用于两个条件。 +1