条件渲染满足流量的最简洁方法

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

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

TIA

Answer 1

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

Answer 2

为了可读性，尽量不要使用三元运算符。 Return如果你知道你可以早点。

import React from "react";

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

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

Answer 3

这看起来很奇怪。您使用的是什么版本的流？我无数次使用过这种风格，但没有发现任何问题。我什至将其插入 try-flow 中，没有任何问题。我想知道这是否是您在使用组件或 App 组件上遇到的错误？

https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdBArgHb7AQtwCCYYAFAEoAXJiowAdADkIAEyxwA3nThwANlngA3YKmAAjDXAC8cGFCZZ6qyjCZQu-Farg69hhQDJPcJy5cAPLLAWnC4amioUsggWMZkvGBkAHzO-qoBABYAjMkAElhqahBwAMJyWADKyCyy+hAAHgEA9Dmp6XAtwVrtLoLOgvQAvgy4nKjw3CwQMJlYUOXgJr4iYniSMvImyUppcLb2jnv+QSG9HSeJcM3n6V1ne4N0QzRAA

条件渲染满足流量的最简洁方法

Cleanest way for conditional rendering to satisfy flow

javascript

flowtype