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

我正在开发一个React.js应用程序，所有页面都有包含从API获取的数据的组件，问题是所有页面在加载时看起来都很奇怪，因为硬编码文本和设计元素首先加载，在获取数据时，所有内容都被填充。在单页应用程序中，或者特别是在React.js中，有没有常见的方法来实现这一点，这样页面在加载时就不会看起来很奇怪？

我们最近遇到了类似的问题，下面是我们如何解决这一问题的概要：

1） 将

加载

键添加到状态，并将其初始设置为

真

2） 当AJAX请求返回数据时，将

load

设置为

false

3）

In render（）

方法在

加载

为

真

以下是演示：和完整代码：

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')
);

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
时间：空，
加载：正确
};
}
componentDidMount（）{
get（this.props.url）
。然后（响应=>{
这是我的国家({
时间：response.data.time，
加载：错误
});
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
让内容；
if（this.state.loading）{
内容='正在加载…'
}否则{
content=当前时间是：{this.state.time}
；
}
返回(
{content}
);
}
}
ReactDOM.render(
，document.getElementById（'content'））
);

提示：与使用任何ajax设置的方式相同，显示加载微调器：）我确实理解这一点，但如何在获取数据时停止页面上所有硬编码内容的加载？我刚刚添加了一个示例，说明如何仅在成功获取数据后才呈现硬编码内容。Sayayin，我刚刚更新了我的答案。这就是你想要的吗？你太棒了！这就是我所需要的，我已经试过了！非常感谢。