Question

我正在研究React Native应用程序。在应用程序中，当用户登录时，将对服务器进行API调用以使用redux-saga获取数据。在redux商店中，我维护一个布尔变量＆＃34; fetchingData＆＃34;。它设置为“真实”＆＃39;一旦API调用开始并设置为＆＃39; false＆＃39;一旦获取数据或发生一些错误。现在，我想在获取数据时显示微调器，并在获取数据时显示FlatList。我知道我可以通过将return语句包装到if-else条件中来完成此操作。我想必须有更好的方法来做到这一点。如果有人可以帮助我，请告诉我在React Native中实现此条件渲染的好方法。提前谢谢。

Answer 1

如果这是一个你在任何地方使用的模式，有几种方法可以抽象出模式：

创建通用<Loading />组件：

class Loading extends React.Component {
  static defaultProps = {
    waitingElement: <Spinner />,
    renderedElement: null
  };

  render() {
    return this.props.loading ? this.props.waitingElement : this.props.renderedElement;
  }
}

// In some other component's `render`:        
<Loading renderedElement={<component with=props />}, loading={this.state.isWaiting} />

使用更高阶的组件来包装组件：

function withLoading(Component, spinner = <Spinner />) {
  return class extends Component {
    render() {
      if (this.props.loading) return spinner;
      return super.render();
    }
  };
}

// Some other file completely
export default withLoading(class MyComponent {
  render() {
    return "Happy path only!";
  }
});

Answer 2

我不这么认为。调用render()方法时，需要根据状态返回相应的组件。

render() {
    const isLoading = this.state.isLoading
    return isLoading ?
        <Spinner /> //return a spinner
        :
        <FlatList /> return a list with data
}

在React Native中使用条件渲染的最佳方法

2 个答案: