Question

我正在制作一个包含header和calendar的日历。 header用于选择日历的类型； weekly或monthly。

我必须制作一个名为CalendarPicker的虚拟组件，以便可以使用switch。我认为需要内联开关，但是jsx不接受。

有更好的方法吗？还是将字符串匹配到组件的另一种方法？

 <CalendarController
        render={({ type, onTypeClick }) => (
          <>
            <header>
              <p>header of agenda</p>
              <button onClick={onTypeClick("weekly")}>weekly</button>
              <button onClick={onTypeClick("monthly")}>monthly</button>
            </header>

            <CalendarPicker
              type={type}
              render={type => {
                switch (this.props.type) {
                  case "monthly":
                    return <MonthlyCalendar />;
                  case "weekly":
                    return <WeeklyCalendar />;
                  default:
                    return <MonthlyCalendar />;
                }
              }}
            />
          </>
        )}
      />

Answer 1

这就是我为实现这一目标所做的。就我而言，大约有50个组件，根据字符串中的名称，我必须渲染该组件。

我创建了一个ComponentSelector.js文件，其中导入了所有组件。

ComponentSelector.js

export default const objComponents = {
       MonthlyCalendar : {
    LoadComponent: function () {
        return require('../../Modules/MonthlyCalendar ').default;
    }
   },
  WeeklyCalendar : {
    LoadComponent: function () {
        return require('../../Modules/WeeklyCalendar ').default;
    }
   }
 }

将其导入您的CalendarController组件

  import objComponents  from './ComponentSelector.js';

   render(){
        var CalComp=objComponents[this.props.type].LoadComponent();
        return(<div>
                <header>
                <p>header of agenda</p>
                <button onClick={onTypeClick("weekly")}>weekly</button>
                <button onClick={onTypeClick("monthly")}>monthly</button>
                </header>
                <CalComp type={type}/>
             </div>)
   }

将字符串匹配到组件React

1 个答案: