Question

在我的项目中，我有一些组件，其中一个是div，其中包含其他几个组件，是一个按钮，它的用法就像一个菜单。

尝试重叠加载页面以防止在组件收费期间采取行动，我修改了我的代码：

1）包含在构造函数中：

this.state = {
    isLoaded: false
}

2）添加componentDidMount（）方法：

componentDidMount() {
    this.setState({
        isLoaded: true
    })
}

3）更改渲染方法：

const isLoaded = this.state.isLoaded;
if (!isLoaded) {
    document.getElementById("loadingPageHTML").style.display = "inline-block";
    return(
        <p className = "noShowIt"> Hola </p>
    );
} else {
    document.getElementById("loadingPageHTML").style.display = "none";
    return (
        <div className="MainMenuButtons">
        ...
}

但是当我在浏览器上调试时，我看到当我按下其中一个按钮时，流程总是输入到此组件的render方法中，因此，加载页面display始终为{{1}即使第二个组件（具有相同的状态和条件）未加载，也会显示状态。

开发具有良好行为的装载方式的方法是什么？

是否有可能以与jQuery中的inline-block函数类似的方式执行此操作？

Answer 1

您可以将反应组件与旧式Web开发相结合。

您希望基于isLoaded状态呈现加载组件或内容组件，而不是使用css和dom选择器。例如：

render () => (!isLoaded) ? <LoadingComponent /> : <Content />;

render() {
   if (!isLoaded) {
     return <LoadingComponent />;
   } else {
     return (<div> ... </div>);
   }
}

当状态改变时，正在渲染的组件将自动更新

在ReactJS中加载页面和常量重新加载组件

1 个答案: