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

Answer 1

调整Popover的placement属性时，需要使用Steps.Step的icon属性。

那是因为您尝试使用 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>
      </>
    );
  }
}