Javascript 满足流的条件渲染的最干净方法

我正在向现有代码添加流。我有很多地方使用条件渲染：例如

import React from "react";

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

从“React”导入React；
导出默认函数App（）{
让可见=真实；
返回(
可见和(
你好，代码沙盒
)
);
}

添加流I get错误

不精确布尔[1]与精确React.Element不兼容

我能理解为什么flow不开心——对我来说，依赖shortcircuit操作符似乎真的很愚蠢。我自己并不真的喜欢这段代码，但是对于我来说，什么是避免错误并保持流畅的最干净的方法呢？我试图避免很多“如果”

TIA
您是否尝试过使用三元运算符？我不熟悉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
  );
}

从“React”导入React；
导出默认函数App（）{
让可见=真实；
返回(
看得见(
你好，代码沙盒
)：null//返回您需要返回的内容
);
}
您是否尝试过使用三元运算符？我不熟悉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
  );
}

从“React”导入React；
导出默认函数App（）{
让可见=真实；
返回(
看得见(
你好，代码沙盒
)：null//返回您需要返回的内容
);
}
为了可读性，请尝试不使用三元运算符。如果你知道可以早点回来的话

import React from "react";

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

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

从“React”导入React；
导出默认函数App（{visible}）{
如果（！可见）{
返回null；
}
返回(
你好，代码沙盒
);
}
为了可读性，请尝试不使用三元运算符。如果你知道可以早点回来的话

import React from "react";

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

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

从“React”导入React；
导出默认函数App（{visible}）{
如果（！可见）{
返回null；
}
返回(
你好，代码沙盒
);
}
这似乎很奇怪。您使用的是什么版本的flow？我已经无数次使用这种风格，但没有发现任何问题。我甚至把它插入了try-flow，没有问题。我想知道这是否是您在消费组件或
App
组件上遇到的错误

这似乎很奇怪。您使用的是什么版本的flow？我已经无数次使用这种风格，但没有发现任何问题。我甚至把它插入了try-flow，没有问题。我想知道这是否是您在消费组件或
App
组件上遇到的错误

感谢您的输入，但遗憾的是，它不能满足flow，因为我们仍在比较不同类型的boolean、react元素和null。这里的错误是
无法返回`可见？（Hello CodeSandbox）：null`因为不精确的null[1]与精确的`React.Element`[2]不兼容。
感谢您的输入，但遗憾的是，它不满足流，因为我们仍在比较不同类型的布尔、React元素和null。这里的错误是
无法返回`可见？（Hello CodeSandbox）：null`因为不精确的null[1]与精确的`React.Element`[2]不兼容。