Самый чистый способ для условного рендеринга, чтобы удовлетворить поток

Question

Я добавляю поток в существующий код. У меня есть много мест, где используется условный рендеринг: например,

import React from "react";

export default function App() {
  let visible = true;
  return (
    visible && (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    )
  );
}

при добавлении потока я получаю сообщение об ошибке inexact boolean [1] is incompatible with exact React.Element

Я могу понять, почему поток не работает - полагаться на оператор короткой цепи кажется действительно привет мне. Мне сам этот код не очень нравится, но какой самый чистый способ для меня, чтобы обойти ошибку и сохранить поток счастливым? Я стараюсь избегать множества ifs.

TIA

Answer 1

Для удобства чтения старайтесь не использовать троичные операторы. Вернитесь рано, если вы знаете, что можете.

import React from "react";

export default function App({visible}) {
  if (!visible) {
    return null;
  }

  return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
  );
}

Answer 2

Вы пробовали использовать троичный оператор? Я не знаком с React, поэтому не могу гарантировать, что это даст тот же результат, что и ваш код с этой платформой.

import React from "react";

export default function App() {
  let visible = true;
  return (
    visible ? (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    ) : null // return whatever you need to there
  );
}