在用户做出选择之前，如何使组件“显示：无”？答案

【问题标题】：How can I make a component "display: none" until the user has made their selection?在用户做出选择之前，如何使组件“显示：无”？
【发布时间】：2023-03-05 15:57:01
【问题描述】：

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

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

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

有什么快速技巧可以用来检查 player 对象是否为 undefined 并且什么都不渲染，然后在做出选择后按照我想要的方式渲染？

【问题讨论】：

标签： javascript reactjs react-native conditional-statements

【解决方案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、0，则不会执行 something。

它非常适合 React 中的条件渲染语法

【讨论】：

这成功了！如果你不介意解释一下这是如何作为支票的？

【解决方案2】：

在 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，未定义），&& 条件后面的部分将不会执行，因为第一部分已经是假的。

a && b - 如果 a 不是 b 则不会执行，因为两者都给出相同的 false 响应。在下面的情况下，如果 a = false，那么 B 无关紧要，因为表达式将始终为 false。因此，react 不会执行 html 部分（相当于 b）

false && true
false && false

【讨论】：

【解决方案3】：

你可以使用这样的东西

<div style={{ display: myVar ? 'block' : 'none' }}>
<p>your data ...</p>
</div>

【讨论】：

style 属性可以直接应用于p 标签
@AnuragSrivastava 我假设组件中可能还有其他东西在问题中没有提到，这就是我添加 div 的原因