Question

嗨，我是编程新手。我想在下面的switch语句中不返回默认情况的链接，

class ParentComponent extends React.PureComponent {
    get_link = () => {
        const item = this.props.item;
        let link;
        switch (item.type) {
            case 'type_1':
                link = this.get_type1_link();
                break;
            default:
                link = '/'; //here i want to return no link
        }
        return link;
    };

    get_type1_link = () => {
        const item= this.props.item;
        const item_data = this.props.item_data;
        const {item_id} = item_data.attributes;
        const filtered_item_data = item_data && item_data.find(item_data 
        => 
            item.id === item_id);
            if (filtered_item_data) {
                return `/viewer/${item_data_id}`;
            } else {
                return '/';
            }
    };

    render = () => {
        const item = this.props.item;
        return (
            <ListItem
                key={item.id}
                link={this.get_link}
                text={this.get_content}/>
        );
    }
}

class ListItem extends React.PureComponent {
    render = () => {
        return (
            <Link to={props.link()}>
                <li>
                    <div className="text">
                        {props.text}
                    </div>
                </li>
            </Link>
       );
    };
}

在ListItem组件中，每个li项目都有一个链接，因此，如果用户单击li项目，则它将页面导航到从{{1}收到的链接}回调函数。

从props.link可能也没有链接返回。我该如何处理没有返回URL的链接组件的这种情况？

有人可以帮我这个忙吗？谢谢。

Answer 1

您可以将ListItem更改为仅在拥有有效链接时才呈现Link。像这样：

class ListItem extends React.PureComponent {
  render = () => {
    const link = props.link();
    if (link) {
      // link is valid
      return (
        <Link to={link}>
          <li>
            <div className="text">
              {props.text}
            </div>
          </li>
        </Link>
      );
    } 
    return (
      // no valid link returned
      <div>
        <li>
          <div className="text">
            {props.text}
          </div>
        </li>
      </div>
    );
  };
}

并将get_link函数的默认大小写更改为：

default:
  link = null;

此外，您应该在<li>内渲染<ul>的标签

如何使用React处理没有链接返回链接组件的to属性的情况？

1 个答案: