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

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() {

  const { player } = this.props;

  if (!player) return null;

  return (

    <p className={

      player.weight >= opponent.weight ? 

        "text-green border-green" : "text-danger border-danger"}>

      {player.weight}

    </p>

  )

}

或者你可以做第一个海报所做的事情

{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 && true

false && false