大佬教程收集整理的这篇文章主要介绍了根据 switch case 更新字符串，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在 React 中创建一个多步表单，它使用 switch case 根据其 ID 呈现组件：
App.Js
{ '0': '...' }Steps.Js
function App() {
const steps = [
{ ID: 'LOCATIOn' },{ ID: 'questions' },{ ID: 'appointment' },{ ID: 'inputData' },{ ID: 'sumMary' },];
return (
<div classname="container">
<Apptheader steps={steps} />
<Step steps={steps} />
</div>
);
}
在 App.Js 的
const Step = ({ steps }) => {
const { step,navigation } = useStep({ initialStep: 0,steps });
const { ID } = step;
const props = {
navigation,};
console.log('StepSumMary',steps);
switch (ID) {
case 'LOCATIOn':
return <StepLOCATIOn {...props} steps={steps} />;
case 'questions':
return <StepQuestions {...props} />;
case 'appointment':
return <StePDAte {...props} />;
case 'inputData':
return <StepUserinputData {...props} />;
case 'sumMary':
return <StepSumMary {...props} />;
default:
return null;
}
};
组件中，我想根据 switch 案例中呈现的组件更改标头中字符串的 <Apptheader /> 和 title。>
subtitle我怎样才能做到这一点？如果我必须为每个标题/副标题再次制作切换案例，我觉得我可能会编写多余的代码。提前致谢。
你可以使用这样的模式
const steps = {
LOCATIOn: { id: 'LOCATIOn',title: 'LOCATIOn',component: StepLOCATIOn },questions: { id: 'questions',title: 'Questions',component: StepQuestions },appointment: { id: 'appointment',title: 'Appointment',component: StePDAte },inputData: { id : 'inputData',title: 'InputData',component: StepUserInputData },sumMary: { id: 'sumMary',title: 'SumMary',component: StepSumMary },};
然后在您的 Steps.js 中使用它时会变成
const Step = ({ steps }) => {
const { step,navigation } = useStep({ initialStep: 0,steps });
const { id } = step;
const props = { navigation };
const component = steps[id].component;
return <Component {...props} steps={steps} />;
};
const Sectiontitle = ({ step }) => {
console.log('step',step);
return (
<div className="sectionWrapper">
<div className="titleWrapper">
<div className="title">title</div>
<div className="nextStep">{step.titlE}</div>
</div>
<ProgressBar styles={{ height: 50 }} />
</div>
);
};
export default Sectiontitle;
这样可以避免代码冗余。
务必更新代码的其他部分，例如 useStep 以接受和 Object 而不是 Array
以上是大佬教程为你收集整理的根据 switch case 更新字符串全部内容，希望文章能够帮你解决根据 switch case 更新字符串所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。