Javascript 如何将组件道具保持在redux状态？

我的redux状态是这样的

import SearchIcon from "@material-ui/icons/Search";

const initState = {
  salesIconList: {
    Icon: TrendingUpIcon,
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
};

TrendingUpIcon用于呈现特定页面

class SalesIconList extends React.Component {
  handleRoute = route => {
    this.props.history.push(route);
  };

  render() {
    children.push(
      <ButtonType
        key={v4()}
        Icon={stockIconList.Icon}
        color={stockIconList.color}
        text={stockIconList.text}
        onClick={this.handleRoute.bind(this, stockIconList.onClick)}
      />
    );
    return (
      {children}
    );
  }
}

---

但是TrendingUpIcon不是可序列化的值，当刷新它不再存在时。

对于此类问题，您可以创建一个查找哈希，使您的类型可序列化。例如：

import TrendingIcon from 'whevever'

const iconHash = {
  trendingIcon: TrendingIcon
}

export iconHash

import iconHash from 'wheverer'

...
<ButtonType
  key={v4()}
  Icon={iconHash[stockIconList[i].Icon]}
  color={stockIconList[i].color}
  text={stockIconList[i].text}
  onClick={this.handleRoute.bind(this, stockIconList[i].onClick)}
/>

然后，每当您需要一个图标时，您都会存储一个字符串表示，并进行查找。例如：

import TrendingIcon from 'whevever'

const iconHash = {
  trendingIcon: TrendingIcon
}

export iconHash

import iconHash from 'wheverer'

...
<ButtonType
  key={v4()}
  Icon={iconHash[stockIconList[i].Icon]}
  color={stockIconList[i].color}
  text={stockIconList[i].text}
  onClick={this.handleRoute.bind(this, stockIconList[i].onClick)}
/>

这是一个粗略的例子，但希望你能大致了解情况。您需要设法使您的类型可序列化