最简单的解决方法是将Step组件从子组件中提取到父组件中。但是如果需要在子组件中使用Step组件,可以使用React的Context来解决。具体步骤如下:
import React, { createContext, useState } from 'react'; import { Steps } from 'antd';
const { Step } = Steps;
export const StepContext = createContext();
export default function ParentComponent() { const [current, setCurrent] = useState(0);
const handleNext = () => setCurrent(current + 1); const handlePrev = () => setCurrent(current - 1);
return (
import React, { useContext } from 'react'; import { StepContext } from './ParentComponent';
export default function ChildComponent() { const { current, handleNext, handlePrev } = useContext(StepContext);
return (
这样Step组件就可以在子组件中正常工作了。