Можно ли написать два условия в одной фигурной скобке?
Я должен отобразить двухкомпонентную базу на основе двух разных условий: сначала должен отображаться один компонент, если флаг 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. потому что это общее в обоих случаях. Является ли это возможным ?
Ответы 3
Конечно. вы можете использовать тернарную операцию для этого
{isAllowed && <Fragment>{isEditMode ? 'When editing' : 'When not editing'}</Fragment>}
Затем вам нужно будет обернуть все ваше условие условием isAllowed и внутри, чтобы иметь несколько if или переключатель.
возможно ли это внутри фигурных скобок без использования if.
{condition&&<span/>} — это эквивалент оператора If в JSX.
всего для двух условий ваш ответ подходит. +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>Вы можете использовать массив:
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>
Что делать, если у меня есть третье условие?