将mobx store中的字符串用作react组件名称可以通过动态渲染实现。
首先,将mobx store中的字符串定义为一个observable属性,以便监视其变化。在mobx store中添加以下代码:
import { observable } from 'mobx';
class Store {
@observable componentName = 'ComponentA';
}
const store = new Store();
export default store;
然后,在React组件中使用mobx-react库来观察mobx store的变化,并将字符串作为组件名称进行渲染。在React组件中添加以下代码:
import React from 'react';
import { observer } from 'mobx-react';
import store from './store';
const ComponentA = () => {
return <div>Component A</div>;
};
const ComponentB = () => {
return <div>Component B</div>;
};
const MainComponent = observer(() => {
const { componentName } = store;
const renderComponent = (componentName) => {
switch (componentName) {
case 'ComponentA':
return <ComponentA />;
case 'ComponentB':
return <ComponentB />;
default:
return null;
}
};
return <div>{renderComponent(componentName)}</div>;
});
export default MainComponent;
在上述代码中,我们定义了两个React组件:ComponentA和ComponentB。根据mobx store中的componentName属性的值,使用switch语句动态决定要渲染哪个组件。
这样,当mobx store中的componentName属性发生变化时,React组件将根据新的值重新渲染相应的组件。
这种方法适用于需要根据运行时条件来动态决定渲染哪个React组件的场景。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云