Question

如何在React Native中有条件地呈现JSX和函数。我想有条件地隐藏和显示加载。

return (
  state.isLoading ? showLoader(true) :
  showLoader(false)
  (
    <View>
      ...
    </View>
  )
)

将showLoader函数从另一个上下文添加到组件中。

const { showLoader } = useContext(LoaderContext);

Answer 1

您可以实现：

render() {
  const { showLoader } = useContext(LoaderContext);

  return (
    <View>
      { this.state.isLoading ? showLoader(true) : showLoader(false) }
    </View>
  )
}

Answer 2

您可以通过执行以下操作来完成它：

return (
  <View>
    {state.isLoading ?
      showLoader(true) :
      <>
        {showLoader(false)}Insert Content Here
      </> 
    }
  </View>
)

您的问题缺乏明确性，如果您可以提供更多信息，我可以给出更准确的答案。

Answer 3

React中的条件渲染的工作方式与JavaScript中条件工作的方式相同。在这里，我们可以将其与其他条件进行比较，如果isLoading为true（state.isLaoding？），它将显示加载程序（showLoader（true）），否则将显示视图（...）。

return (
      state.isLoading ? showLoader(true) :
      (
        <View>
          ...
        </View>
      )
    )

在条件渲染中包含功能和JSX

3 个答案: