[英]how to update progress bar from states in different components in React
I have an app I am building that has a progress bar in the footer.我有一个正在构建的应用程序,它的页脚中有一个进度条。 The HTML and CSS is perfect, I just don't know how to add functionality.
HTML 和 CSS 是完美的,我只是不知道如何添加功能。 Here's is the html for the bar:
这是酒吧的 html:
<section className="3xl:scale-125">
<ul class="step-wizard-list">
<li class="step-wizard-item current-item">
<span class="progress-count">1</span>
<span class="progress-label">Get started</span>
</li>
<li class="step-wizard-item">
<span class="progress-count">2</span>
<span class="progress-label">Connect to Metamask</span>
</li>
<li class="step-wizard-item">
<span class="progress-count">3</span>
<span class="progress-label">Connect to Polygon</span>
</li>
<li class="step-wizard-item">
<span class="progress-count">4</span>
<span class="progress-label">Claim NFT</span>
</li>
</ul>
</section>
</div>
current-item is how the progress bar knows how it should update the css. current-item 是进度条如何知道它应该如何更新 css。 What I need to do is add current-item to each
<li>
somehow, based on states (or even onClicks if that is easier) in 3 different components.我需要做的是基于 3 个不同组件中的状态(或者甚至是 onClicks,如果这更容易)以某种方式将 current-item 添加到每个
<li>
中。
I tried to figure out how to do it with react useContext, but the problem is is that the states aren't coming from 1 single component.我试图弄清楚如何使用 react useContext 来做到这一点,但问题是状态不是来自 1 个单个组件。 Any advice would be greatly appreciated!
任何建议将不胜感激!
If you need more info I can share a repo.如果您需要更多信息,我可以分享一个回购。
Create a container and use a React.useSatate.创建一个容器并使用 React.useSatate。
const [step,setActiveStep]=useState(0)
<PogressContainer>
{stepsComponents[step]}
<ProgressBar activeStep={step}/>
</PorgressContainer>
stepsComponents=[
<Step1 activeStep={step}/>,
<Step2 activeStep={step}/>,
<Step3 activeStep={step}/>]
It's just an idea.这只是一个想法。
To use a context in multiple components, you need to provide it on a higher level.要在多个组件中使用上下文,您需要在更高级别上提供它。
You can include an update function to update the context, then consumers can use it, as outlined in the docs: https://reactjs.org/docs/context.html#updating-context-from-a-nested-component您可以包含更新 function 来更新上下文,然后消费者可以使用它,如文档中所述: https://reactjs.org/docs/context.html#updating-context-from-a-nested-component
type ProgressBar = {
currentItem: number;
updateCurrentItem: (item: number) => void;
};
export const ProgressBarContext: Context<ProgressBar> = createContext({});
export default function App() {
const [progressBar, setProgressBar] = useState({
currentItem: 0,
updateCurrentItem: (i: number) =>
setProgressBar((prev) => ({ ...prev, currentItem: i })),
});
return (
<ProgressBarContext.Provider value={progressBar}>
<MakeProgress />
<ProgressBar />
</ProgressBarContext.Provider>
);
}
You can update the current item from any component like so:您可以从任何组件更新当前项目,如下所示:
export default function MakeProgress() {
return (
<ProgressBarContext.Consumer>
{({ updateCurrentItem }) => (
<div>
<button onClick={() => updateCurrentItem(1)}>Complete 1</button>
<button onClick={() => updateCurrentItem(2)}>Complete 2</button>
<button onClick={() => updateCurrentItem(3)}>Complete 3</button>
<button onClick={() => updateCurrentItem(4)}>Complete 4</button>
</div>
)}
</ProgressBarContext.Consumer>
);
}
To read the current item, it is basically the same.读取当前项,基本相同。 You can dynamically change the class list using
className
.您可以使用
className
动态更改 class 列表。
export default function ProgressBar() {
return (
<ProgressBarContext.Consumer>
{({ currentItem }) => (
<ul>
<li className={currentItem >= 1 ? 'current-item' : ''}>1</li>
<li className={currentItem >= 2 ? 'current-item' : ''}>2</li>
<li className={currentItem >= 3 ? 'current-item' : ''}>3</li>
<li className={currentItem >= 4 ? 'current-item' : ''}>4</li>
</ul>
)}
</ProgressBarContext.Consumer>
);
}
Stackblitz: https://stackblitz.com/edit/react-ts-4pttoq?file=App.tsx Stackblitz: https://stackblitz.com/edit/react-ts-4pttoq?file=App.tsx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.