Question

我正在开发一个React.js应用程序，并且所有页面都有包含从API获取的一些数据的组件，问题是加载时所有页面看起来都很奇怪，因为硬编码的文本和设计元素首先加载，而数据加载时获取的所有东西都被填入。有没有通用的方法在单页应用程序中或特别是在React.js中执行此操作，以便页面在加载时看起来不奇怪？

Answer 1

我们最近遇到了类似的问题，这是我们如何处理它的概述：

1）在状态中添加loading键，并将其初始设置为true
2）当AJAX请求返回数据时，将loading设置为false
3）In render()方法返回加载指示符/微调器时 loading为true

以下是演示：http://codepen.io/PiotrBerebecki/pen/ozaaPm和完整代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      time: null,
      loading: true
    };
  }

  componentDidMount() {  
    axios.get(this.props.url)
      .then(response => {
        this.setState({
          time: response.data.time,
          loading: false
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    let content;

    if (this.state.loading) {
      content = 'Loading...'
    } else {
      content = <p>Current time is: {this.state.time}</p>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}


ReactDOM.render(
  <App url={"http://date.jsontest.com/"} />,  document.getElementById('content')
);

如何使用ajax优雅地呈现React.js组件

1 个答案: