javascript - 如何使用弹出框描述显示数字而不是点

Question

我antd在（点样式）中分步显示数据，在悬停点时，我使用 react 在 Popover 中显示数据。代码工作正常。随着我添加更多步骤，它看起来很笨拙。这是工作代码，请给我一个关于如何显示数字代替点的建议。在悬停数字（代替点）时，我们会在 Popover 中显示数据。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      steps: [
        { name: "START", dateTime: "Aug 05, 2019 12:30 PM" },
        {
          name: "RTC complex (PICKUP)",
          dateTime: "12:40 PM - 12:50 PM min(s)"
        },
        {
          name: "Kailasagiri Rope Way (DROP)",
          dateTime: "02:04 PM - 02:50 PM   46min(s)"
        },
        { name: "END", dateTime: "Aug 04, 2019 5:30 PM" }
      ]
    };
  }
  render() {
    const customDot = (dot, props) => {
      const { description, title, index } = props;

      if (description) {
        return (
          <Popover
            content={
              <div style={{ width: "140px", textAlign: "center" }}>
                <p> {title} </p>
                <p> {description} </p>
              </div>
            }
          >
            {dot}
          </Popover>
        );
      }
      return dot;
    };

    return (
      <div className="App">
        <Row gutter={16}>
          <Col xs={24}>
            <Steps
              progressDot={(dot, properties) => customDot(dot, properties)}
              current={0}
            >
              {this.state.steps.map((step, index) => (
                <Steps.Step
                  key={index}
                  title={step.name}
                  description={step.dateTime}
                />
              ))}
            </Steps>
          </Col>
        </Row>
      </div>
    );
  }
}

这是我的工作代码沙箱示例的链接https://codesandbox.io/s/react-steps-f3b0t

标签： javascriptreactjsantd

Answer 1

在调整 的属性时需要使用的icon属性。Steps.StepplacementPopover

那是因为您尝试使用Popover.

class App extends Component {
  state = {
    steps: [...]
  };

  render() {
    return (
      <>
        <Steps style={{ margin: 40 }}>
          {this.state.steps.map((step, index) => (
            <Steps.Step
              key={index}
              title={step.name}
              description={step.dateTime}
              icon={
                <Popover
                  // Choose your placement depending on steps location
                  placement="bottom"
                  content={
                    <div>
                      {step.name}
                      <br />
                      {step.dateTime}
                    </div>
                  }
                >
                  // Change icon to numbers
                  <Button shape="circle" type={index ? 'default' : 'primary'}>
                    {index + 1}
                  </Button>
                </Popover>
              }
            />
          ))}
        </Steps>
      </>
    );
  }
}