Question

我想在React中重构switch语句的代码。

我将数据作为对象数组。我遍历每个对象并检查其类型字段。对于每种类型，我都有一些要打印的消息，并且每个对象数据都应在列表项中。为此，我使用switch语句，这样做会使我觉得代码重复太多了。

如何重写下面的代码？

render = () => {

    switch(item.type) {
        case 'item_created':
            return (
                <li className="item">
                    <div className="details">
                        <Svg4/>
                        <span>{item.type}</span>
                    </div>
                    <time>{item.timestamp}</time>
                </li>
            );
        case 'item_deleted':
            return (
                <li className="item">
                    <div className="details">
                        <Svg1/>
                        <span>{item.name}</span>
                    </div>
                    <time>{item.timestamp}</time>
                </li>
            );
        case 'settings_updated':
            return (
                <li className="item">
                    <div className="details">
                        <Svg2/>
                        <span>{item.version}</span>
                    </div>
                    <time>{item.timestamp}</time>
                </li>
            );
        default:
            return null;
    }}

有人可以帮我重构它，还是提供一种更好的方法？

Answer 1

重构始终是主观的，但是如何创建一个可以在switch语句中多次重用的新组件呢？

const Item = ({icon, text, timestamp}) => (
  <li className="item">
    <div className="details">
      {icon}
      <span>{text}</span>
    </div>
    <time>{timestamp}</time>
  </li>
)

Answer 2

嘿，您可以使用如下所示的对象映射。

   const mapping = {
  item_created: item => (
    <li className="item">
      <div className="details">
        <Svg4 />
        <span>{item.type}</span>
      </div>
      <time>{item.timestamp}</time>
    </li>
  ),
  item_deleted: item => (
    <li className="item">
      <div className="details">
        <Svg1 />
        <span>{item.name}</span>
      </div>
      <time>{item.timestamp}</time>
    </li>
  ),
  settings_updated: item => (
    <li className="item">
      <div className="details">
        <Svg2 />
        <span>{item.version}</span>
      </div>
      <time>{item.timestamp}</time>
    </li>
  ),
};

现在您可以使用以下对象

mapping[item.type](item)

如何在React中重构switch语句的代码？

2 个答案: