Question

我正在尝试使用react.js微调器组件，但我想不通如何在完成任务后将其隐藏。

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

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

public class RoundLabel : Label
{
[Browsable(true)]
public Color _BackColor { get; set; }

public RoundLabel()
{
    this.DoubleBuffered = true;
}

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    using (var graphicsPath = _getRoundRectangle(this.ClientRectangle))
    {
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        using (var brush = new SolidBrush(_BackColor))
            e.Graphics.FillPath(brush, graphicsPath);
        using (var pen = new Pen(_BackColor, 1.0f))
            e.Graphics.DrawPath(pen, graphicsPath);
        TextRenderer.DrawText(e.Graphics, Text, this.Font, this.ClientRectangle, this.ForeColor);
    }
}

private GraphicsPath _getRoundRectangle(Rectangle rectangle)
{
    int cornerRadius = 15; // change this value according to your needs
    int diminisher = 1;
    GraphicsPath path = new GraphicsPath();
    path.AddArc(rectangle.X, rectangle.Y, cornerRadius, cornerRadius, 180, 90);
    path.AddArc(rectangle.X + rectangle.Width - cornerRadius - diminisher, rectangle.Y, cornerRadius, cornerRadius, 270, 90);
    path.AddArc(rectangle.X + rectangle.Width - cornerRadius - diminisher, rectangle.Y + rectangle.Height - cornerRadius - diminisher, cornerRadius, cornerRadius, 0, 90);
    path.AddArc(rectangle.X, rectangle.Y + rectangle.Height - cornerRadius - diminisher, cornerRadius, cornerRadius, 90, 90);
    path.CloseAllFigures();
    return path;
}

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道具将不起作用，因为这不是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

如何隐藏微调器组件

3 个答案: