如何显示数字而不是带有弹出框说明的点

Question

我正在{Dot Style}中以antd步骤显示数据，将鼠标悬停在点上时，我使用react在Popover中显示了数据。代码工作正常。当我添加更多步骤时，它显得笨拙。这是工作代码，请给我一个关于如何显示数字代替点的建议。将鼠标悬停在数字上（代替Dot），然后在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

在调整icon的{​​{1}}属性时，需要使用Steps.Step的{​​{1}}属性。

那是因为您尝试使用placement进行“自定义”步骤。

Popover