如何隐藏微调器组件

Question

我正在尝试使用react.js微调器组件，一旦我的任务完成，我无法弄清楚如何隐藏它。

这是一个简单的codepen，我使用隐藏属性。我会将其设置为false或true，具体取决于我是否要显示它：

https://codepen.io/manish_shukla01/pen/GLNOyw

    <Spinner hidden={true} size={SpinnerSize.large} label="manish's large spinned" />

Answer 1

Conditional rendering using state。

在React中，您可以创建封装所需行为的不同组件。然后，您只能渲染其中一些，具体取决于您的应用程序的状态。

工作示例（单击Dashboard选项卡）：

---

集装箱/仪表板

import isEmpty from "lodash/isEmpty";
import React, { Component } from "react";
import api from "../../utils/api";
import DisplayUser from "../../components/DisplayUser";
import DisplaySignUp from "../../components/DisplaySignUp";
import Spinner from "../../components/Spinner";

class Dashboard extends Component {
  state = {
    isLoading: true,
    currentUser: {}
  };

  componentDidMount = () => {
    this.fetchUsers();
  };

  fetchUsers = async () => {
    try {
      const res = await api.get(`/users/1`);
      setTimeout(() => {
        this.setState({ currentUser: res.data, isLoading: false });
      }, 1500);
    } catch (e) {
      console.error(e.toString());
    }
  };

  // the below can be read like so:
  // if "isLoading" is true...  then display a spinner
  // else if "currentUser" is not empty... then display the user details
  // else show a signup message
  render = () =>
    this.state.isLoading ? (
      <Spinner />
    ) : !isEmpty(this.state.currentUser) ? (
      <DisplayUser currentUser={this.state.currentUser} />
    ) : (
      <DisplaySignUp />
    );
}

export default Dashboard;

Answer 2

对于你打算做的事情，只需添加hidden prop就行了，因为这不是Spinner组件的预期属性。我认为你需要做的是在你的组件中引入条件渲染。请看下面的实施：

import * as React from 'react';
import { render } from 'react-dom';
import {
  PrimaryButton,
  Spinner,
  SpinnerSize,
  Label,
  IStackProps,
  Stack
} from 'office-ui-fabric-react';

import './styles.css';

const { useState } = React;

const SpinnerBasicExample: React.StatelessComponent = () => {
  // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
  const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };

  const tokens = {
    sectionStack: {
      childrenGap: 10
    },
    spinnerStack: {
      childrenGap: 20
    }
  };

  return (
    <Stack tokens={tokens.sectionStack}>
      <Stack {...rowProps} tokens={tokens.spinnerStack}>
        <Label>Extra small spinner</Label>
        <Spinner size={SpinnerSize.xSmall} />
      </Stack>

      <Stack {...rowProps} tokens={tokens.spinnerStack}>
        <Label>Small spinner</Label>
        <Spinner size={SpinnerSize.small} />
      </Stack>
    </Stack>
  );
};

function App() {
  const [hidden, setHidden] = useState(false);
  return (
    <div className="App">
      {hidden && <SpinnerBasicExample />}
      <PrimaryButton
        data-automation-id="test"
        text={!hidden ? 'Show spinner' : 'Hide spinner'}
        onClick={() => setHidden(!hidden)}
        allowDisabledFocus={true}
      />
    </div>
  );
}

Answer 3

您需要使用条件渲染来隐藏/显示微调器。您可以定义组件状态，然后可以将其设置为false或true，具体取决于您是否要显示它。

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false
    };
  }
  render() {
    return (
      <div className="App">
        {!this.state.hidden && <SpinnerBasicExample />}
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

有关更多信息，请阅读此https://reactjs.org/docs/conditional-rendering.html