如何使组件“显示：无”直到用户做出选择？

Question

在反应中工作，我试图让我的组件在做出选择之前不显示。做出选择后，我需要设置其他样式，如下所示：

<p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>

在选择完成之前，我不想显示任何内容；截至目前，虽然 player 是 undefined 条件仍然运行，但我得到一个空边框。

我可以使用任何快速技巧来检查 player 对象是否为 undefined 并且不渲染任何内容，然后按照我的方式渲染做出选择后您愿意吗？

Answer 1

您可以检查player：{player && <p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>}此语法variable && something相当于if(variable){ something }因此，如果 variable 是一个 falsy 值，例如 null、undefined、< /span>不执行。0，则something它非常适合 React 中的条件渲染语法

Answer 2

你可以使用这样的东西<div style={{ display: myVar ? 'block' : 'none' }}><p>your data ...</p></div>

Answer 3

在 React 中，有一个 render 方法，如果你不希望它渲染，你可以返回 null。例如render() {&nbsp; const { player } = this.props;&nbsp; if (!player) return null;&nbsp; return (&nbsp; &nbsp; <p className={&nbsp; &nbsp; &nbsp; player.weight >= opponent.weight ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; "text-green border-green" : "text-danger border-danger"}>&nbsp; &nbsp; &nbsp; {player.weight}&nbsp; &nbsp; </p>&nbsp; )}或者你可以做第一个海报所做的事情{player && <p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>}如果 player 为假（null、false、未定义），则 && 后面的部分将被删除。条件不会执行，因为第一部分已经是假的。一个&& b - 此处如果 a 不是 b 将不会执行，因为两者都给出相同的 false 响应。在下面的情况下，如果 a = false，那么 B 是什么并不重要，因为表达式始终为 false。因此，react不会执行html部分（相当于b）false && truefalse && false