reactjs - React - 如果条件超出 html 标记属性

Question

我知道属性内的条件可以正常工作，但是当 active 为 false 时，这会在data-tip属性中给出一个 false 字符串。

<div data-tip={active && 'hello'}>

...
</div>

当 active 为 false 时，我希望 data-tip 属性不会显示在呈现的组件中<div> ... </div>。如果我认为我可以在 data-tip 属性之外添加一个条件，但它失败了。

<div {active && data-tip='hello'}>

...
</div>

如果不将条件放在 div 元素之外，如何实现这一点？

标签： reactjsjsx

Answer 1

如果你通过 undefined 它将不会被渲染。

<div data-tip={!active ? undefined : 'hello'}>

</div>