在 Step 组件中,使用 antd 提供的 useContext API 获取 status 状态,以及 onClick 事件,并传递给子组件。子组件中使用 useContext 获取父组件传递的状态并应用到自身的业务逻辑中。
import React, { useState, useContext } from 'react';
import { Steps } from 'antd';
const { Step } = Steps;
const StepsContext = React.createContext({});
function ChildComponent(props) {
const { current, onClick } = useContext(StepsContext);
const handleClick = (e) => {
onClick(e);
// other logic based on current status...
}
return (
)
}
function ParentComponent(props) {
const [current, setCurrent] = useState(0);
const [status, setStatus] = useState('process');
const handleClick = (e) => {
setStatus(current === 1 ? 'finish' : 'process');
setCurrent(current + 1);
}
return (
)
}