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

是否可以在一个大括号中写出两个条件？

3 个答案: