理解逻辑运算符和反应渲染

Question

请帮助我理解这一点： 我正在像这样的 react-native 中进行条件渲染

{state.sign && (<Image style={{height:200,width:100}} source{{uri:state.sign}})}

它呈现没有问题我在stacknavigation中遇到了这个问题，当我尝试使用navigation.popToTop()导航到根目录时

这会引发错误。但是，当我将其更改为

{ state.sign ? (<Image style={{height:200,width:100}} source{{uri:state.sign}}): null}

它有效。有些事情我不明白。连续监控“&&”并且“？：”被处理一次并除尘的东西？

Answer 1

可能你忘记关闭标签了？

  <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

Answer 2

在大多数情况下，两者之间没有太大区别，但重要的一个用例是渲染的返回值。 React 组件可以渲染有效的 JSX，或者 null 表示没有要渲染的内容，并且布尔值被忽略。不允许返回 undefined。

Conditional Rendering

内联 If 与逻辑 && 运算符

如果您想有条件地包含一些 JSX 与渲染的 JSX 的其余部分，则使用此选项。

例子

return (
  <>
    <h1>A Header</h1>
    <div>Some text on the page</div>
    {state.sign && (
      <Image
        style={{height: 200, width: 100}}
        source{{ uri:state.sign }}
      />
    )}
  </>
);

内联 If-Else 与三元运算符

如果您想有条件地渲染一个 JSX 或另一个 JSX 以及渲染的 JSX 的其余部分，则使用此选项。

例子：

return (
  <>
    <h1>A Header</h1>
    <div>Some text on the page</div>
    {state.sign ? (
      <Image
        style={{height: 200, width: 100}}
        source{{ uri:state.sign }}
      />
    ) : (
      <div>There is nothing to see here!</div>
    )}
  </>
);

防止组件渲染

在极少数情况下，您可能希望组件隐藏自己，即使它是由另一个组件呈现的。为此返回 null 而不是其渲染输出。

如果您尝试有条件地渲染是组件的返回值，那么差异就很重要了。

无效，因为它不返回 null 以不渲染任何内容：

return state.sign && (
  <Image
    style={{height: 200, width: 100}}
    source{{ uri:state.sign }}
  />
);

有效：

return state.sign ? (
  <Image
    style={{height: 200, width: 100}}
    source{{ uri:state.sign }}
  />
) : null;