javascript - 条件渲染满足流程的最简洁方法

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]与exact React.Element不兼容

我可以理解为什么流程不高兴 - 依赖短路运算符对我来说似乎真的很做作。我自己不太喜欢这段代码，但是对我来说，绕过错误并保持流程愉快的最干净的方法是什么？我试图避免很多如果。

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