Question

我确信我的问题很明显但我无法在任何地方找到简单的答案。我不熟悉redux / flux，所以我不知道我是否需要学习它们来实现我的目标。我从我的服务器URL获取我需要在组件上显示的图像。我想显示加载器，直到获取图像。最好（也是最简单）的方法是什么？有必要使用flux / redux吗？我可以使用fetch（image_URL）。然后...承诺？

现在只需在渲染img html标签时调用url：

{this.props.data.images.map(img=>{
return(
  <img src={img.url}/>
)})

如何管理此任务的异步？我已经使用apollo来获取本地数据库数据。我可以使用apollo获取外部数据吗？

Answer 1

最简单的方法是定义一个加载标志，并用它来确定是否应该渲染加载器。似乎你的获取逻辑在其他地方，但想法是一样的。

class YourComponent() extends Component {
    constructor() {
        this.state = {
            isLoading: false,
        };
    }

    componentWillMount() {
        this.setState({isLoading:true});
        fetch('image_URL')
        .then(res => {
            this.setState({
                images: res.images,
                isLoading: false,
            })
        })
    }

    render() {
        const { isLoading , images} = this.state;

        if (isLoading) {
            return <YourLoaderComponent />
        }

        return (
            <div>
                {images.map(img => <img src={img.url} />)}
            </div>
        );
    }
}

Answer 2

您可以在<img/>标记上使用 onLoad 反应回调。

教程：

定义React Component <LoadedComponent />，它将是一个微调器。

然后，您可以定义另一个将默认<ImageComponent />状态设置为false的React Component imageLoaded。

如果imageLoaded为false，<ImageComponent/>将img和width height呈现0px。

<img />代码onLoad绑定到函数imageLoaded()，然后将imageLoaded状态设置为true。当onLoad状态发生变化<img/>时（{1}}，<ImageComponent/>会自动重新呈现状态，并且仅呈现正常宽度和高度的<img/>。

import React from "react";
import { render } from "react-dom";

const LoaderComponent = () => (
  <img
    width="300"
    height="300"
    alt="Loading spinner"
    src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif"
  />
);

const hiddenImageStyle = {
  width: 0,
  height: 0
};

class ImageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    };
  }

  imageLoaded() {
    this.setState({
      loaded: true
    });
  }

  render() {
    if (this.state.loaded) {
      return(
        <div>
          <img alt="Cat" src={this.props.url} width="300" height="300" />
        </div>
      )
    }
    return (
      <div>
        <img
          alt="Cat"
          src={this.props.url}
          width="300"
          height="300"
          onLoad={() => this.imageLoaded()}
          style={hiddenImageStyle}
        />
        <LoaderComponent />
      </div>
    );
  }
}

const imagesUrls = [
  "https://c1.staticflickr.com/5/4200/34055408873_e9bf494e24_k.jpg",
  "https://c1.staticflickr.com/5/4536/37705199575_ded3cf76df_c.jpg"
];
class App extends React.Component {
  render() {
    return (
      <div>
        {imagesUrls.map((url, index) => (
          <ImageComponent key={index} url={url} />
        ))}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

您可以在此处看到一个有效的示例：https://codesandbox.io/s/zwz9o84kn3 如果你有一个很好的互联网速度，你可能不会注意到微调器。要查看微调器，最好是在单独的选项卡中打开沙箱的预览

然后打开chrome dev工具，在“广告联盟”标签中选中disable cache并将预设设置为Slow 3G

刷新后，您会注意到加载微调器，直到图像加载

从慢api反应获取img

2 个答案:

教程：