[React] [Vue] 在React中实现动态组件和批量绑定

在Vue中，可以通过<component> 实现动态组件，也可以在这个动态组件上绑定事件以及绑定属性。
如下面的vue代码

<component :is="componentName" @click="handleClick"></component>

handleClick事件只需要在代码中写一次，就可以实现给所有的组件绑定。
但是React中，没有类似于vue的原生<component>。

看下面的一段伪代码

import Step1 from "./Step1";
import Step2 from "./Step2";

const stepArr = [
  {
    title: '1',
    component: <Step1 />
  },
  {
    title: '2',
    component: <Step2 />
  },
]

const [currentStep, setCurrentStep] = useState<number>(0);
const handleNext = () => {
  setCurrentStep(currentStep + 1);
};
const handlePrev = () => {
  setCurrentStep(currentStep - 1);
};
const [prevDisabled, setPrevDisabled] = useState<boolean>(false);
const [nextDisabled, setNextDisabled] = useState<boolean>(false);

return (
<div>
     {stepArr[currentStep].component}

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Button disabled={prevDisabled} onClick={handlePrev}>
             上一步
           </Button>
           <Button disabled={nextDisabled} onClick={handleNext}>
             下一步
           </Button>
      </div>
   </div>
)

如果我想给每个<Step />都通过属性传入setPrevDisabled 和 setNextDisabled
让Step内部调用这两个事件控制Button的disabled，实现这个绑定就很麻烦。
(用 currentStep === 1 && (<Step1 setPrevDisabled ={setPrevDisabled } />) 这种方式来写。
事件绑定越多，重复代码越多)

所以我们要先在React中实现一个动态组件(DynamicComponent.tsx)。

// DynamicComponent.tsx

剩下的就简单了，引入DynamicComponent组件，stepArr改一改，使用DynamicComponent统一绑定事件。

跟vue的<component>相比，还有不足的地方。比如，多一种<Step />，就需要去DynamicComponent里引入、注册，在switch里绑定。好在已经够用了。

结束。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/zg1i3yg8zdqtk8fc