条件渲染满足流程的最简单方法

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
  );
}