Можно ли написать два условия в одной фигурной скобке?

Question

Я должен отрендерить базу двух компонентов на двух разных условиях, первый компонент должен отображаться, если флаг isAllowed имеет значение true.и другой компонент должен отображаться, если isAllowed и isEditMode - true.и у меня больше условий в том же методе рендеринга, которые зависят от флага 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,потому что это распространено в обоих случаях.это возможно?

Answer 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>

Answer 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>

Answer 3

Конечно.Вы можете использовать троичную операцию для этого

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