我对 VerticalTimelineElement\ 的属性图标有疑问答案

【问题标题】：I have a problem with VerticalTimelineElement's attribute icon我对 VerticalTimelineElement\ 的属性图标有疑问
【发布时间】：2022-09-27 15:04:28
【问题描述】：

我想在响应中自动创建 VerticalTimeline 中的元素组件。我是反应的初学者，我遇到了一个我无法真正找到答案的错误。我可能打错了。

import SchoolIcon from \"@material-ui/icons/School\";
import WorkIcon from \"@material-ui/icons/Work\";

我通过了上面的方法，例如，如果我手动插入<SchoolIcon/>，所有代码都可以工作。

这是一个数组示例，我从中提取组件属性的详细信息：

const data=[
{
    timelineType: \"education\" / \"work\",
    dateValue: \"01/2020 - 09-2021\", 
    titleValue: \"example\",
    subtitleValue: \"example or nothing\",
    paragraphValue: \"paragraph example\",
},
];

一切正常，除了图标值.我尝试了两种方法，但没有成功。这是我的代码：

const TimelineItem = ({
  timelineType,
  dateValue,
  titleValue,
  subtitleValue,
  paragraphValue,
}) => {
  let iconStyleValue, iconValue, ifSubtitleValue;
  if (timelineType === \"education\") {
    iconStyleValue = `background: \"#3e497a\", color: \"#fff\"`;
    iconValue = `SchoolIcon`;
  }
  if (timelineType === \"work\") {
    iconStyleValue = `background: \"#e9d35b\", color: \"#fff\"`;
    iconValue = `WorkIcon`;
  }
  if (subtitleValue) {
    ifSubtitleValue = (
      <h4 className=\"vertical-timeline-element-subtitle\">{subtitleValue}</h4>
    );
  }

  function typeOfIcon(){
    console.log(\"icon\")
    iconValue === \"SchoolIcon\" ? <SchoolIcon/> : <WorkIcon/>
  }

  return (
      <VerticalTimelineElement
        className={`vertical-timeline-element--${timelineType}`}
        date={ dateValue }
        iconStyle={{ iconStyleValue }}
        icon={typeOfIcon()}
        // icon={ <${iconValue}/> }
      >
        <h3 className=\"vertical-timeline-element-title\">{titleValue}</h3>
        {ifSubtitleValue}
        <p>{paragraphValue}</p>
      </VerticalTimelineElement>
  );
};

标签： reactjs

【解决方案1】：

我发现了问题

const TimelineItem = ({
  timelineType,
  dateValue,
  titleValue,
  subtitleValue,
  paragraphValue,
}) => {
  let backgroundColorStyle, colorStyle, iconValue, ifSubtitleValue;
  if (timelineType === "education") {
    backgroundColorStyle = "#3e497a"
    colorStyle = "#fff"
    iconValue = <SchoolIcon/>;
  }
  if (timelineType === "work") {
    backgroundColorStyle = "#e9d35b"
    colorStyle = "#fff"
    iconValue = <WorkIcon/>;
  }
  if (subtitleValue) {
    ifSubtitleValue = (
      <h4 className="vertical-timeline-element-subtitle">{subtitleValue}</h4>
    );
  }

  return (
    <>
      <VerticalTimelineElement
        className={`vertical-timeline-element--${timelineType}`}
        date={ dateValue }
        iconStyle={{ background: backgroundColorStyle, color: colorStyle }}
        icon={ iconValue }
        >
        <h3 className="vertical-timeline-element-title">{titleValue}</h3>
        {ifSubtitleValue}
        <p>{paragraphValue}</p>
      </VerticalTimelineElement>
    </>
  );
};

【讨论】：