Question

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

所以：

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

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

this.isLoading = false;

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

render() {

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

这失败了。

然后我的按钮就是我显示微调器的地方。我希望隐藏“登录”＆＃39;文本，并用微调器替换它，但是......首先要根据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>

可以/应该这样做，或者......我是否可以将道具传递给我的装载组件，称为“可见＆＃39;什么的，我设定了吗？

Answer 1

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

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

Answer 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>

根据变量

2 个答案: