代码之家 › 专栏 › 技术社区 › catandmouse

在react返回语句中使用&&operator进行条件呈现

reactjs javascript

catandmouse · 技术社区 · 6 年前

当条件使用&operator时,如何在类组件中构造返回语句,如:

if (x === null && y === null)

…然后显示此HTML:

<div className="col-12">
    <SomeComponent />
</div>

否则显示此HTML:

   <div className="col-6">
        <SomeOtherComponent />
   </div>
   <div className="col-6">
        <SomeOtherComponent />
   </div>

我需要这个在返回语句中,因为我将整个条件包装在 <main><div className="row></div></main> 包装如:

<main>
  <div className="row">
    // show the above mentioned html conditionally
  </div>
</main>

3 回复 | 直到 6 年前

kemicofa ghost 6 年前

你应该使用简短的if语句 <condition> ? <if true> : <if false> . 你的报税表应该是这样的。

 return (
    <main>
      {x === null && y === null ? (
        <div className="row">
          <div className="col-12">
            <SomeComponent />
          </div>
        </div>
      ) : (
        <div className="row">
          <div className="col-6">
            <SomeOtherComponent />
          </div>
          <div className="col-6">
            <SomeOtherComponent />
          </div>
        </div>
      )}
    </main>
  );

codesandbox with working example

Sebastijan DumanÄiÄ 6 年前

可以使用三元运算符:

(x === null && y === null) ? (render if true) : (render this if false)

此外,空值是不稳定的值,因此可以写入 (!x && !y) .

如果要用ifs编写,请调用如下方法 this.renderComponent() 解决所有问题,只返回值或整个组件。

aravind_reddy 6 年前

下面介绍如何使用三元运算符: {condition ? (if condition is true ) : (if condition is false)}

    <main>
      <div className="row">
          {x === null && y === null ? (
<div className="col-12">
    <SomeComponent />
</div>):  (<div className="col-6">
        <SomeOtherComponent />
   </div>
   <div className="col-6">
        <SomeOtherComponent />
   </div>)}
     </div>
    </main>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前