Question

我是AntD的新手，对步进器组件有一些麻烦-特别是如何在每个步骤中添加自定义组件。

例如，

import javafx.animation.KeyFrame;
import javafx.scene.Node;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.shape.Arc;
import javafx.stage.Stage;
import javafx.scene.shape.ArcType;
import javafx.scene.paint.Color;
import javafx.scene.layout.Pane;
import javafx.collections.ObservableList;
import javafx.animation.Timeline;
import javafx.util.Duration;
import java.lang.Runnable;


public class JavaFXDrawArcs extends Application
{
    // Create a Pane for arcs
    private Pane pane = new Pane();

    // Rotation speed
    private double startAngle = 10;

    // launch the application
    public void start(Stage stage)
    {
        // Set title for the stage
        stage.setTitle("Rotating arcs in javaFx");

        // Create a scene
        Scene scene = new Scene(pane, 250, 300);

        // Center variables and radius
        double centerX = scene.getWidth() / 2;
        double centerY = scene.getHeight() / 2;
        double radius = Math.min(scene.getWidth(), scene.getHeight()) * 0.4;

        // Create arcs
        Arc arc = new Arc(centerX, centerY, radius, radius, 0.0f, 30.0f);
        Arc arc2 = new Arc(centerX, centerY, radius, radius, 90.0f, 30.0f);
        Arc arc3 = new Arc(centerX, centerY, radius, radius, 180.0f, 30.0f);
        Arc arc4 = new Arc(centerX, centerY, radius, radius, 270.0f, 30.0f);

        arc.setType(ArcType.ROUND);
        arc2.setType(ArcType.ROUND);
        arc3.setType(ArcType.ROUND);
        arc4.setType(ArcType.ROUND);

        // Set fill for the arc
        arc.setFill(Color.BLACK);
        arc2.setFill(Color.RED);
        arc3.setFill(Color.GREEN);
        arc4.setFill(Color.BLUE);

        // Adding arcs to pane
        pane.getChildren().addAll(arc, arc2, arc3, arc4);

        Runnable arcRotate = new spinArcThread(arc);
        Runnable arc2Rotate = new spinArcThread(arc2);
        Runnable arc3Rotate = new spinArcThread(arc3);
        Runnable arc4Rotate = new spinArcThread(arc4);

        Thread thread1 = new Thread(arcRotate);
        Thread thread2 = new Thread(arc2Rotate);
        Thread thread3 = new Thread(arc3Rotate);
        Thread thread4 = new Thread(arc4Rotate);

//      thread1.start();
//      thread2.start();
//      thread3.start();
//      thread4.start();


        // Creating the frames for the rotation animation
        Timeline arcSpin = new Timeline(new KeyFrame(Duration.millis(70), e -> spinArc()));
        arcSpin.setCycleCount(Timeline.INDEFINITE);

        // Start animation
        arcSpin.play();

        // Set the scene
        stage.setScene(scene);

        stage.show();
    }

    // Animate arc's rotation
    protected void spinArc()
    {
        ObservableList<Node> list = pane.getChildren();
        for (Node n: list)
        {
            ((Arc)n).setStartAngle(((Arc)n).getStartAngle() + startAngle);
        }
    }

    public static void main(String args[])
    {
        // launch the application
        launch(args);
    }
}

class spinArcThread implements Runnable
{
    private Arc arc = new Arc();
    private int count = 0;
    spinArcThread(Arc arcArg)
    {
        arc = arcArg;
    }

    @Override
    public void run()
    {

        while (count < 1)
        {
//              System.out.print("Task completed " + count + "\n");
            arc.setStartAngle(arc.getStartAngle() + 10);
            count++;
        }
    }
}

为简单起见，如果我要使用“自动完成”组件，那就是：

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

到目前为止没有运气。任何建议表示赞赏。

Answer 1

Steps.Step中没有content。

您可能正在尝试在Steps中呈现自定义组件，那么您需要提供ReactNode而不是string类型：

<Steps>
  <Steps.Step> title="Finished" description={<AutoComplete/>} />
</Steps>

所有提到的in the docs，我相信您需要的是basics of React.

如何在Ant Design stepper中添加自定义组件？

1 个答案: