如何在反应中使用 jsx 条件?

Question

我想在渲染方法中的某些条件为真时呈现按钮和组件。

下面是我的代码，

render = () =>  {
<div>
{(this.state.exists || this.state.active) &&
<button>
<svg>something</svg>
</button>}
{this.state.exists || this.state.active) &&
<ChildComponent
first_val={first_val}/>}
</div>
}

上面的代码有效。正如您从上面的代码中看到的，我使用相同的条件来呈现或不呈现按钮和组件。我正在复制条件。所以我试图像下面这样做，它抛出了大括号的错误。

render = () =>  {
<div>
{(this.state.exists || this.state.active) &&
<button>
<svg>something</svg>
</button>
<ChildComponent
first_val={first_val}/>}
</div>
}

有没有办法简化这种或更好的方法来使用这里的条件。有人可以对此提供见解吗？谢谢。

Answer 1

表达式只能计算为一件事。

您正在尝试创建两个东西：一个按钮和一个子组件。

您需要将它们包装在数据结构中，例如React.Fragment。

{
(this.state.exists || this.state.active) &&
<>
<button>
<svg>something</svg>
</button>
<ChildComponent first_val={first_val}/>
</>
}

这就像从函数返回数组[1, 2]而不是1 2。

Answer 2

这是因为子元素元素需要在单个元素范围内

尝试更换您的

render = () =>  {
<div>
{(this.state.exists || this.state.active) &&
<button>
<svg>something</svg>
</button>
<ChildComponent
first_val={first_val}/>}
</div>
}

跟

render = () =>  {
<div>
{(this.state.exists || this.state.active) &&(
<React.Fragment>
<button>
<svg>something</svg>
</button>
<ChildComponent
first_val={first_val}/>
</React.Fragment>
)}
</div>
}