基于变量显示和隐藏组件答案

【问题标题】：Show and hide a component based on a variable基于变量显示和隐藏组件
【发布时间】：2018-09-20 16:59:52
【问题描述】：

我创建了一个加载图标组件，它只是在加载某些东西时显示一个微调器。我将它加载到我的登录组件中，并希望在用户单击登录按钮后显示图标（并且 API 调用正忙）。

所以：

import Loading from '../common/loading';

然后我设置了一个 isLoading 变量，默认为 false：

this.isLoading = false;

然后，在我的渲染方法中，我希望确定是否需要显示微调器。

render() {

  var LoadingSpinner = this.state.canLogin ? Loading : '<div></div>';

这失败了。

然后我的按钮就是我显示微调器的地方。我希望隐藏“登录”文本，并将其替换为微调器，但是...首先要根据 isLoading 变量处理微调器。

 <button 
              className="btn btn-lg btn-primary btn-block" 
              type="button" 
              onClick={this.handleSignin} 
              disabled={!this.state.canLogin}>
                <span>Sign in</span> <LoadingSpinner />
              </button>
          </div>

可以/应该以这种方式完成，或者...我是否应该将一个名为“Visible”的道具传递给我的加载组件，然后我设置它？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将 isLoading 放入构造函数，默认为 false 然后在 render 方法中，添加一个条件

{ this.state.canLogin ? <LoadingSpinner /> : null }

【讨论】：

【解决方案2】：

这是您可以使用状态变量执行的操作。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }
  onClick = () => {
    this.setState({
      loading: true
    })
  }
  render() {
    return (
        <div>
          {this.state.loading && <div>Loading</div>}
          <button onClick={this.onClick}>Click to Load</button>
        </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'>
</div>

【讨论】：