Question

我的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不是可序列化的值，刷新时它不再存在。

Answer 1

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

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)}
/>

在上述情况下，您的redux数据可能如下所示：

const initState = {
  salesIconList: {
    Icon: 'trendingIcon', // notice it is now a string
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
}

这是一个粗略的示例，但希望您能大致了解。您需要找到一种使您的类型可序列化的方法。

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

1 个答案: