Как сделать так, чтобы компонент «отображал: нет», пока пользователь не сделал свой выбор?

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, 0, затем something не выполняется.

Это хорошо подходящий синтаксис для условного рендеринга в React

Answer 2

Вы можете использовать что-то вроде этого

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

Answer 3

В React есть метод рендеринга, и вы можете вернуть ноль, если вы не хотите, чтобы он рендерился.

Например,

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, undefined), часть после условия && не будет выполняться, поскольку первая часть уже ложна.

a && b - здесь, если a не равно, b не будет выполняться, поскольку оба дают одинаковый ответ false. В приведенном ниже случае, если a = false, тогда не имеет значения, какой B, поскольку выражение всегда будет ложным. Таким образом, реакция не выполняет часть html (что эквивалентно b)

false && true
false && false